hi splunker9999,
try with this example,
create view table_row_highlighting.xml
<dashboard script="table.js" stylesheet="table.css">
<label>Table Row Highlighting</label>
<row>
<table id="highlight">
<title>Row Coloring</title>
<searchString>index=test |table name test1 test2</searchString>
<earliestTime>0</earliestTime>
<option name="drilldown">none</option>
</table>
</row>
</dashboard>
next copy and paste table.js and table.css into splunk_home/etc/apps/app_name/appserver/static
after your finish, restart SPLUNK
table.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 _(['test2']).contains(cell.field);
},
render: function($td, cell) {
// Add a class to the cell based on the returned value
var value = parseFloat(cell.value);
// Apply interpretation for number of historical searches
if (cell.field === 'test2') {
if (value < 60) {
$td.addClass('range-cell').addClass('range-elevated');
}
else if(value > 60 && value < 80) {
$td.addClass('range-cell').addClass('range-severe');
}
else if(value > 80 && value < 100) {
$td.addClass('range-cell').addClass('range-higher');
}
}
// Update the cell content
$td.text(value.toFixed(2)).addClass('numeric');
}
});
mvc.Components.get('highlight').getVisualization(function(tableView) {
tableView.on('rendered', function() {
// Apply class of the cells to the parent row in order to color the whole row
tableView.$el.find('td.range-cell').each(function() {
$(this).parents('tr').addClass(this.className);
});
});
// Add custom cell renderer, the table will re-render automatically.
tableView.addCellRenderer(new CustomRangeRenderer());
});
});
table.css
/* Row Coloring */
#highlight tr.range-elevated td {
background-color: #329606 !important;
}
#highlight tr.range-severe td {
background-color: #F1FF70 !important;
}
#highlight tr.range-higher td {
background-color: #D6344D !important;
}
#highlight td.range-severe, td.range-elevated, td.range-higher{
font-weight: 800;
}
at finish, you have this result
for more informations, follow this link:
https://answers.splunk.com/answers/357989/how-to-color-a-table-row-based-on-a-cells-value.html#answer-363853
... View more