Skip to main content
Nintex Community Menu Bar
sample table
Numeric field column displayed as progress bar

Here’s a simple HTML template you can copy and paste to display a number field in a table column (between 0 - 100) as a progress bar.

The code

<span style="white-space:normal;">
<span style=" width: 160px; height: 22px; background-color: #f3f3f3; overflow: hidden;white-space:normal;display:inline-block;border-radius:5px;">
<span style="width: {{{myProgress}}}%; background-color: #4CAF50; height: 22px; white-space:normal;display:inline-block;">
</span>
</span><span style="font-size: 13px; line-height: 22px; vertical-align: top; padding-left: 10px; ">{{{myProgress}}}%</span>
</span> </span>

Notes:

  • Make sure to enable "Allow HTML"
  • My row height is 48px. If yours is taller or shorter, adjust the inline CSS in the code block
  • The runtime HTML will be wrapped in a <span> tag. 

Design time screenshot

HTML Template in Table Column - Design Time Preview

I’m sure there are a ton of HTML snippets out there to customize the display of a column in a table, please share what you’ve built. 

With Nintex Apps, you can use HTML snippets in combination with Conditional Style Variants to achieve UI customizations like the ones listed below. Let me know which example you’d like to see implementation for.

  1. User Avatars/Initials: For columns showing "Assigned To" or "Created By," display small circular avatars with the user's profile picture or initials.
  2. Overlapping circular avatars for multiple user selection: 
    Overlapping circular avatars
  3. Mini-Charts (Sparklines): For numerical data that shows trends (e.g., sales performance, stock prices), embed tiny line or bar charts (sparklines) directly within the cell to provide quick visual insights.
    Mini-Charts (Sparklines)
  4. Visual Status Indicators: Instead of just text, use small, color-coded badges or "pills" to represent status (e.g., "Active," "Pending," "Completed"). You could also use icons (like a checkmark for "Done" or a warning sign for "Alert") or small colored dots.
    Visual Status Indicators

     

  5. Relative Timestamps: For date/time columns like "Last Updated" or "Due Date," display relative timestamps (e.g., "2 hours ago," "Tomorrow," "Last week") for easier readability.
    Relative Timestamps

     

Be the first to reply!

Reply