Custom color for pivot table header

[tsaho8]

Hi Team,

I want to give background color and text color of the header in bellow screenshot.

[Sijo1995]

Hi @tsaho8 ,

Please try this script

widget.on('domready', function(sender, ev){
	
//header columns
 var $ps1 = $(".p-grand-total-head", element);
	$(".p-dim-head").css({'text-align' :'center','font-weight' : 'bold','color' : '#132f57','background-color' :'#e2e9ec','vertical-align': 'middle', 'wrap': 'true','font-size':'12px'}); 
	$(".p-dim-member").css({'text-align' :'left','font-weight' : 'bold','color' : '#132f57','vertical-align': 'middle', 'wrap': 'true'}); 
	$('.p-head-content, .p-value,#title_span').css('white-space','normal') // word wrap


	//var $ps2=$(".p-value")
	
 $ps1.css('font-size' , '12px');
 $ps1.css('font-weight' , 'bold');
 $ps1.css('color' , '#132f57');
 $ps1.css('background-color' , '#e2e9ec');
 $ps1.css('text-align' , 'center'); 
$ps1.css('vertical-align' , 'middle');  //phantom
	
	
		// remove last blank td	
 var tags = $('td.phantom', element);
 for(var i=0; i<tags.length; i++) {
  tags[i].style.width = '0px';
 }
	

	

	$('td.p-total-row-val,td.p-total-row-head,td.p-total-row-head, td.p-total-row-val, td.p-grand-total-row-head,td.p-value,td.p-last-row-col', 'widget[type=pivot]').css({'border-bottom':'thin solid #DCDCDC', 'wrap': 'true'});
		 
 $(' td.p-grand-total-row-head,td.p-colored', 'widget[type=pivot]').css({'font-weight' :'bold','color':'#132f57', 'wrap': 'true'});

});

Thanks

Sijo

[tsaho8]

Hi Sijo,

I have tried above script but no luck. Please suggest?

Regards,

Tulu

[Alek_qbeeq · Accepted solution]

Hey @tsaho8 

Try this widget script:

widget.transformPivot({
    rowIndex: ['member']
}, function setCellStyle(metadata, cell) {
	if(metadata.rowIndex == 0){
	cell.style.color = 'black';
	cell.style.fontWeight = 'bold';
    cell.style.background = 'linear-gradient(0deg, rgba(83,199,251,1) 0%, rgba(243,251,251,1) 100%)';
}
});

Always here to help,
Alek from QBeeQ
aleksander.jonczek@qbeeq.io
QBeeQ - Gold Implementation and Development Partner
www.qbeeq.io

[tsaho8]

Hi Alek,

Your solution is amazing.

I want to create one landing page for my report and will give the navigation action to move to different dashboard from landing page. How will create this landing page for my report?

[michael_qbeeq]

Hi @tsaho8 ,

which version of Sisense your using on which OS (windows or Linux)? As those may vary in the approach for script building, especially on Pivot side. Also are you planning to do it for both Pivot/Table?

At QBeeQ we develop a wide range of plug-ins, and of them is our Expandable Pivot that has the feature your are looking for built-in alongside many other powerful features, like Transpose, Viewers ability to change columns/rows/values displayed and many more. This is a very powerful Self-Service plug-in that allows Viewers to design their own views in Pivot and elevate them to next level of analytics!

We are also on verge of releasing enhanced table with aggregation, which will incorporate design capabilities as well.

Feel free to reach out for a live demo and free trial, we're always here to help,

Always here to help,
Michael from QBeeQ
michael.becker@qbeeq.io
QBeeQ - Gold Implementation and Development Partner
www.qbeeq.io