Table Widget Format Header Row

[Dennis_M]

Hello, I'm new to the Beta Community and a Java novice.  Can a member direct me to internal Sisense sources on how to format a table widget's column header row and selected table columns (background color, font attributes, etc.)?  Working in Linux environment, thanks - Dennis

[javierecfpn]

Sadly this is not very well documented but you can do a lot of cool stuff with JS inside the widgets, my advice would be to play a little bit with the classes of the rows and cells inside the <widget> object on the page, this will for example change the color for the headers and center align its text (just to give you an idea you will probably modify it to do something else as it fits you)

note: only for pivot tables

widget.on('domready', function(se, ev) {
	
	//change color of header cells
	$(".table-grid__row.table-grid__row-0 .table-grid__cell", element).css("background", "cyan");
	
	//change width % of columns
	//$(".table-grid__row.table-grid__row .table-grid__cell", element).css("width", "100%");
	//$(".table-grid.table-grid--data", element).css("width", "100%");
	
	//center align
	$(".table-grid__row.table-grid__row-0 .table-grid__cell .table-grid__content", element).css("text-align", "center");
});

Also I would recommend just reading more inside the Pivot 2 API and what can be done in JS, as you can do the thing I just mentioned in JS and much more and it would be more natural for the widget

https://sisense.dev/reference/js/widget/pivot2.html

[Dennis_M]

Javier,  THANK YOU for taking the time to respond to my post.  I copied the code exactly as you submitted into the widget script editor page, saved, and refreshed the dashboard - no change occurred to the row header's background or text align elements. 😕  If there something I missed or need to add to the script?  Also, I have started to review the Pivot 2 API documentation.  I do have much to learn.  - Dennis

[javierecfpn · Accepted solution]

I tested this with version L2021.10.0.124 on Linux, but with a pivot table, now that I see more clearly you are using a normal table, try this

widget.on('domready', function(se, ev) {
	
	//change color of header cells
	var cols = $(".dataTable.no-footer tr th", element);
	cols.css("background", "cyan");
	
	//change width of columns
	cols.css("width", "200px");
	
	//center align
	cols.css("text-align", "center");
});

[Dennis_M]

Success Javier!  You have set me free!  I think I have just enough to get me started to format the elements of my JTD tables.  I really appreciate you taking the time.  - D 😁

[javierecfpn]

No problem, glad to be helpful

[Krishna810]

Hii,

This is very useful information for me .thanks