Formatting Table Widget

Hello bathyphenm,

Thank you for reaching out, and welcome to the Sisense Community!

This can, indeed, be done with the 'Edit Script' functionality. You can use CSS by wrapping it in Javascript. Here are some example scripts that will help get you started. You may need to tweak them for your specific use-case.

1. Format the column header row as bold: Use the following script to format the header rows and columns of a Pivot table:

   widget.on("ready", function(w, args) {
     var $ps1 = $(".p-grand-total-head,.p-dim-head", element);
     $ps1.css('font-weight' , 'bold');
   });
   

   This script sets the font weight of the header rows to bold [please refer to https://community.sisense.com/t5/knowledge-base/formatting-pivot-header-rows-and-columns-via-css/ta-p/9151 for more info].

2. Align certain headers as center: You can modify the same script to include text alignment for headers:

   widget.on("ready", function(w, args) {
     var $ps1 = $(".p-grand-total-head,.p-dim-head", element);
     $ps1.css('font-weight' , 'bold');
     $ps1.css('text-align' , 'center'); 
   });
   

   This script sets the text alignment of the header rows to center [please refer to https://community.sisense.com/t5/knowledge-base/formatting-pivot-header-rows-and-columns-via-css/ta-p/9151 for more info].

3. Align certain columns as right aligned: Use the following script to align numeric values to the right:

   widget.on('domready', function(se, ev){
     const alignNumbersToTheRight = () =>{
       $('td', element).each(function(){
         if(/^[0-9,.]*$/.test($(this).text())){
           $(this).css('text-align', 'right')
         }
       })
     }
     alignNumbersToTheRight()
     const elementToObserve = $('table tbody', element)[0]
     const observer = new MutationObserver(function(e) {
       alignNumbersToTheRight()
     })
     observer.observe(elementToObserve, {subtree: true, childList: true});
   });
   

   This script aligns numeric values to the right in the table widget [please refer to https://community.sisense.com/t5/knowledge-base/align-numeric-values-to-the-right-on-a-table-widget/ta-p/21538 for more info].

By incorporating these scripts into the 'Edit Script' section of your table widget, you can achieve the desired formatting.

As an additional FYI, 

function changeCSS() {
    var style = document.createElement('style');
    style.type = 'text/css';
    // Change this CSS to whatever CSS rule is needed
    var styleString = `widget-toolbar { display: none !Important; }
    .div {}
    `
    if (style.styleSheet) {
        style.styleSheet.cssText = styleString;
    } else {
        style.appendChild(document.createTextNode(styleString));
    }
    document.getElementsByTagName('head')[0].appendChild(style);
}
prism.run([
    changeCSS()
])

widget.on('render', function (ev, se) {
    function changeHeaderColorCSS(backgroundColor, textColor) {
        var widgetID = widget.oid
        var style = document.createElement('style');
        style.type = 'text/css';
        // Change this CSS if needed
        var styleString = `[widgetid='${widgetID}'] .table-grid__cell--row-0  { background-color: ${backgroundColor} !Important; color: ${textColor} !Important }`
        if (style.styleSheet) {
            style.styleSheet.cssText = styleString;
        } else {
            style.appendChild(document.createTextNode(styleString));
        }
        document.getElementsByTagName('head')[0].appendChild(style);
    }
    // Change color or other attribute here
    changeHeaderColorCSS('blue', 'white')
})

Thank you so much for your reply.

The only one I can seem to get to work is the columns with numbers in being left-aligned, which is a great start.

Could the issue I have with the bold column headers be because I am using a standard table widget, rather than a pivot table?