cancel
Showing results for 
Search instead for 
Did you mean: 

Custom color for pivot table header

tsaho8
7 - Data Storage
7 - Data Storage

Hi Team,

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

tsaho8_0-1678773527969.png

 

 

1 ACCEPTED SOLUTION

Alek_qbeeq
9 - Travel Pro
9 - Travel Pro

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%)';
}
});

Alek_qbeeq_0-1678806596211.png

Always here to help,
Alek from QBeeQ

QBeeQ - Gold Implementation and Development Partner
www.qbeeq.io

View solution in original post

5 REPLIES 5

Sijo1995
9 - Travel Pro
9 - Travel Pro

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
7 - Data Storage
7 - Data Storage

Hi Sijo,

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

Regards,

Tulu

Alek_qbeeq
9 - Travel Pro
9 - Travel Pro

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%)';
}
});

Alek_qbeeq_0-1678806596211.png

Always here to help,
Alek from QBeeQ

QBeeQ - Gold Implementation and Development Partner
www.qbeeq.io

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
8 - Cloud Apps
8 - Cloud Apps

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

QBeeQ - Gold Implementation and Development Partner
www.qbeeq.io