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 color, font attributes, etc.)?  Working in Linux environment, thanks - Dennis

 

 

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

     

6 Replies

Replies have been turned off for this discussion
  • 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");
});