Colored labels in Table widget
If there are more rows in table widget its bit difficult to find a particular item from a column. But it will be easy if we applied different colors to different items in the column. Here is a script to apply styles to each items in table widget.
Steps:
-
Create a table widget
-
Add below widget script.
-
Update the variable columnIndex with index of column to which color should be applied. (index is a number assigned to columns starting with 1. In above screenshot, State column has index 1, Country has index 2 and Region has index 3)
-
Update the variable itemStyleMapping with mapping of item to style. Style can be background color, font color, padding etc.
-
Save the script and refresh widget
widget.on('domready', function(se, ev){
let columnsIndex = 3
let itemStyleMapping = {
'West':'background-color:#e64c72; color:white; padding: 2px 8px; border-radius:15px',
'South': 'background-color:#e69545; color:white; padding: 2px 8px; border-radius:15px',
'Northeast': 'background-color:#5f5da8; color:white; padding: 2px 8px; border-radius:15px',
'Midwest': 'background-color:#4a9455; color:white; padding: 2px 8px; border-radius:15px',
'Unknown': 'background-color:#8c8b8c; color:white; padding: 2px 8px; border-radius:15px'
}
const elementToObserve = $('table tbody', element)[0];
$(elementToObserve).find(`tr td:nth-child(${columnsIndex})`).each(function(index, value){
var label = $(this).text()
if(label in itemStyleMapping)
{
$(this).text('')
$(this).prepend(`<mark style="${itemStyleMapping[label]}">${label}</mark>`)
}
})
const observer = new MutationObserver(function(e) {
for(const m of e) {
if (m.type === 'childList') {
$.each(m.addedNodes, function(index, value){
elementObj = $(value).find('td:nth-child(3)')
var label = elementObj.text()
if(label in itemStyleMapping)
{
elementObj.text('')
elementObj.prepend(`<mark style="${itemStyleMapping[label]}">${label}</mark>`)
}
})
}
}
})
observer.observe(elementToObserve, {subtree: true, childList: true});
})-Hari
