Align Numeric Values to the Right on a Table Widget

[ILLIA]

Align Numeric Values to the Right on a Table Widget

Disclaimer: Please note that this blog post contains one possible custom workaround solution for users with similar use cases. We cannot guarantee that the custom code solution described in this post will work in every scenario or with every Sisense software version. As such, we strongly advise users to test solutions in their environment prior to deploying them to ensure that the solutions proffered function as desired in their environment. For the avoidance of doubt, the content of this blog post is provided to you "as-is" and without warranty of any kind, express, implied, or otherwise, including without limitation any warranty of security and or fitness for a particular purpose. The workaround solution described in this post incorporates custom coding, which is outside the Sisense product development environment and is, therefore, not covered by Sisense warranty and support services.

Description

This article represents a solution for aligning numeric content to the right on any Table widget. As per the latest Sisense updates, 'domready' event changes are sometimes overwritten. This solution reacts to any Table widget change (new content displayed, the page has been changed, etc) and applies CSS formatting. 

Prerequisites

Basic JS knowledge and any Table widget with a numeric column

Solution

Paste this code to the widget script:

widget.on('domready', function(se, ev){

  const alignNumbersToTheRight = () =>{
	  console.log('aligning numbers to the right...')
  $('td', element).each(function(){
  if(/^[0-9,.]*$/.test($(this).text())){
  	$(this).css('text-align', 'right')
  }
  })
  }
	
  alignNumbersToTheRight()
  // Observe changes in the table body
  const elementToObserve = $('table tbody', element)[0]
  const observer = new MutationObserver(function(e) {
    alignNumbersToTheRight()
  })

  observer.observe(elementToObserve, {subtree: true, childList: true});
})

As a result, all numbers are aligned to the right:

Also please take a look at the regular expression used in this script: /^[0-9,.]*$/
This expression looks for any string that contains digits, dot,s, and comma signs. In case you need to align numeric values that contain additional signs (like currencies), you might want to add them in this expression. For example, adding a dollar sign will look like this: /^[0-9,.$]*$/