Formatting Table Widget

Hi,

I am very new to Sisense and I am struggling with the formatting capabilities of the table widget. I would like to do some basic formatting of the table as follows:

Format the column header row as bold
Align certain headers as centre.
Align certain columns as right aligned.

Am I able to do this within 'Edit Script' and if so, please could someone point me in the right direction?

Kind Regards Carly

bathyphen

Posted 1 year ago·Last reply 1 year ago

3 comments

bathyphen

OP1 year ago

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?

DRay

·1 year ago

As an additional FYI,

As an example of a script that allows using "raw" CSS (with curly brackets {}), a script like this can be used:

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()
])

The styleString variable can be used to enter any "raw" CSS as long as needed, this CSS is added to the header of the page and is now standard CSS.Table widgets individual cell include class names for every cell including the index of a cell on both the column and row basis, this can be used to select only the top header for a specific styling rule for example.To make a rule specific to one widget, a widget OID can be added to a CSS selector string, using the format [widgetid='${widgetID}'] at the beginning of a selector, an example of this functionality is:

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

Without this CSS rules are not widget ID specific, and apply to all widgets where the rest of the selector applies.

DRay

·1 year ago

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.

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].
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].

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.