My Table is as follows
RAG status Count
Red 1
Amber 4
Green 10
Grey 7
I am using this code from the link : https://answers.splunk.com/answers/230164/how-to-get-a-table-cell-color-to-change-depending.html
However I am not able to color the complete row, it jst colours the first column RAG status,can you let me know the issue where i am going wrong. Below is the JS and CSS file:
JS:
require([
'underscore',
'jquery',
'splunkjs/mvc',
'splunkjs/mvc/tableview',
'splunkjs/mvc/simplexml/ready!'
], function(_, $, mvc, TableView) {
// Row Coloring Example with custom, client-side range interpretation
var CustomRangeRenderer = TableView.BaseCellRenderer.extend({
canRender: function(cell) {
// Enable this custom cell renderer for both the active_hist_searches and the active_realtime_searches field
return _(['Overall Transition Status']).contains(cell.field);
},
render: function($td, cell) {
var value = cell.value;
if (cell.field === 'OTS') {
if (value =='Green') {
$td.addClass('range-cell').addClass('range-green');
}
else if (value =='Amber') {
$td.addClass('range-cell').addClass('range-amber');
}
else if (value =='Grey-Not Submitted') {
$td.addClass('range-cell').addClass('range-grey');
}
else if (value =='Red') {
$td.addClass('range-cell').addClass('range-red');
}
}
$td.text(value);
}
});
mvc.Components.get('A1').getVisualization(function(tableView) {
tableView.on('rendered', function() {
tableView.$el.find('td.range-cell').each(function() {
$(this).parents('tr').addClass(this.className);
});
});
tableView.addCellRenderer(new CustomRangeRenderer());
});
});
CSS :
/* Row Coloring */
#A1 tr.range-green td {
background-color: #329606 !important;
}
#A1 tr.range-amber td {
background-color: #F1FF70 !important;
}
#A1 tr.range-red td {
background-color: #D6344D !important;
}
#A1 td.range-green, td.range-amber, td.range-red{
font-weight: 800;
}
... View more