Showing results for 
Search instead for 
Did you mean: 
Sisense Team Member
Sisense Team Member

Using HTML for Style and Formatting in Pivots


A common use case within Pivot and Table widgets is to display a clickable hyperlink (see: this community post).  However, the ability to render HTML within these widgets can be used for more than just links.  Any HTML can be rendered, which enables a variety of styling and formatting options.

In this post, we'll walk through an example project management use case in Sisense, which includes a Pivot containing project status information.  In this example, each project has three health statuses: Customer, Technical, and Timeline.  Each one exists as a separate column, with a widget script to color-code the statuses:

Three Separate Status Columns





    function(metadata, cell) {
        if (cell.value == 'Red') {
   = {
                color: 'red'
        } else if (cell.value == 'Green') {
   = {
                color: 'green'
        } else if (cell.value == 'Yellow') {
   = {
                color: 'yellow'




The product team has requested we combine the three statuses into a single column.

Solution 1

One option is to create a dimension table in our data model that normalizes the three statuses into key/value pairs of StatusType and StatusValue, then create a concatenation of {StatusType}: {StatusValue}.  The Pivot output might look something like this:

Concatenated Key/Value Status Column


You can see that there are two drawbacks:

  1. The Notes (and any subsequent columns) are duplicated, once for each Status
  2. We’ve lost the color coding and would need to elevate the complexity of our widget script to account for this.
Solution 2

A second option, which is the subject of this article, is to use a combination of SQL and HTML to produce the combined Status column, which eliminates the duplication issue above (#1) and arguably makes our styling implementation much simpler (#2).

Rendered HTML Status Column

Here is an example of the SQL/HTML within the data model's custom column, which produces the HTML that is rendered in the Pivot.





'<b><p style="font-size:12px">Customer: ' + 
		WHEN CustomerStatus LIKE 'Red%' THEN '<font color="red">' 
		WHEN CustomerStatus LIKE 'Yellow%' THEN '<font color="yellow">' 
		WHEN CustomerStatus LIKE 'Green%' THEN '<font color="green">' 
	ELSE '<font color = #black' END + CustomerStatus + '</font><br>' +

'Technical: ' + 
		WHEN TechnicalStatus LIKE 'Red%' THEN '<font color="red">' 
		WHEN TechnicalStatus LIKE 'Yellow%' THEN '<font color="yellow">' 
		WHEN TechnicalStatus LIKE 'Green%' THEN '<font color="green">' 
		ELSE '<font color = black' END + TechnicalStatus + '</font><br>' +

'Timeline: ' + 
		WHEN TimelineStatus LIKE 'Red%' THEN '<font color="red">' 
		WHEN TimelineStatus LIKE 'Yellow%' THEN '<font color="yellow">' 
		WHEN TimelineStatus LIKE 'Green%' THEN '<font color="green">' 
	ELSE '<font color = black' END + TimelineStatus + '</font></p></b>'





Reminder: The configuration option Allows rendering Pivot Table content as HTML must be enabled within the Admin menu.  The link at the beginning of this post describes the process in more detail.


Keep the size of the table and text field in mind, to avoid negatively impacting build or query performance.

This is just one small example of employing HTML for a stylistic use case, as opposed to a clickable hyperlink.  

Version history
Last update:
‎10-31-2023 08:01 AM
Updated by:
Community Toolbox

Recommended quick links to assist you in optimizing your community experience:

Developers Group:

Product Feedback Forum:

Need additional support?:

Submit a Support Request

The Legal Stuff

Have a question about the Sisense Community?

Email [email protected]

Share this page: