Conditional Coloring based on PIVOT Dimension (not value)

[Yannick]

Hi All,

I am looking for a way to color the entire row of a PIVOT table based on specific dimension criteria.
The default feature in the PIVOT table is to apply conditional coloring for a value. However, I would like to apply conditional coloring based on the value of a dimension in the pivot table (in this example: name of the row item). 

Does anyone have experience with a widget script to color the entire row of the table based on specific row criteria? 

Example: I want to color the entire row EBITDA in grey (see screenshot attached). 

Note: I am not looking to use the alternating rows/subtotal design feature from the widget itself. 

[lharrison]

You can use something like this (Windows Sisense):

widget.on('ready',function(){
	var valueToFind = 'Value'

	var containingRow = $('td.p-dim-member[fidx="1"] div').filter(function(){
		return $(this).text().toUpperCase()==valueToFind.toUpperCase();
	}).closest('tr');
	
	containingRow.css({'background-color':'orange'});
})

Replace the valueToFind with what you're looking for and replace fidx="1" with the column number beginning at 0. Note that this will only work on dimensions, values are different. If you want to just highlight the individual box (so not the whole row) replace closest('tr') with closest('td').

[Yannick]

Hi, lharrison
thanks for your input. This code was not working for me but maybe because I am using the Linux-based cloud environment? But thank you anyway for the suggestion!

[javierecfpn · Accepted solution]

First disable alternative rows on the pivot table then you can do this (it works but just to give you the idea)

widget.on('domready', function(se, ev) {
	//data grid
	var rows = $('.pivot-container .table-grid--data .table-grid__row', element).not('.table-grid__row-0'); //get all the cells of the column
	var ix = 0;
	rows.each(function() {
		do_row($(this), ix);
		ix++;
   	});
	
	function do_row(row, ix){
		var color = 'cyan';
		var row_el = $(row);
		var c0 = row_el.find('.table-grid__cell--col-0 .table-grid__content__inner'); //name
		var c1 = row_el.find('.table-grid__cell--col-1 .table-grid__content__inner'); //value
		if(c1.text() == '1,001'){
			console.log(c1.text(), color)
			//change the color of the row
			row_el.css("background-color",color);
			//fixed grid
			$('.pivot-container .table-grid--fixed .table-grid__row-' + (ix + 1)).css("background-color",color)
		}
	}
		  
});

This will do bg color for the entire row, beware of pagination as the row has not been rendered yet this may not work.

[Yannick]

Thanks a lot! It is working 🙂