Forum Discussion

Dennis_M's avatar
Dennis_M
Cloud Apps
11-23-2021
Solved

Table Widget Format Header Row

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 ...
Linux
  • javierecfpn's avatar
    javierecfpn
    11-26-2021

    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");
});

     

javierecfpn's avatar
javierecfpn
Cloud Apps
11-25-2021

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's avatar
Dennis_M
Cloud Apps
11-26-2021

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's avatar
    javierecfpn
    Cloud Apps
    11-26-2021

    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's avatar
      Dennis_M
      Cloud Apps
      11-26-2021

      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's avatar
        javierecfpn
        Cloud Apps
        11-26-2021

        No problem, glad to be helpful

    • Krishna810's avatar
      Krishna810
      Cloud Apps
      03-07-2024

      Hii,

      This is very useful information for me .thanks