How to change row color in multiple tables on a dashboard based on column value?

[email2vamsi]

I am able to change the row color in table on the basis of column value.
This is working fine for a single table in a dashboard.
It's not working if i have to add multiple tables inside a single dashboard.
It's not accepting the highlight table id for the second table. Please help.

[gcusello]

Hi email2vamsi,
download and install the Splunk 6.0 Dashboard Examples App (https://splunkbase.splunk.com/app/1603/).
There is an example that answers to your request.
Bye.
Giuseppe

[niketn · Accepted solution]

Feature to color Table Columns based on Row Range values is built in to Splunk 6.5 onwards.

Refer to Table Row Highlighting example on Splunk 6.x Dashboard Examples. The example does the following:
1) Table id as highlight
2) Custom Table render is called for table row with id highlight
3) Custom table render sets cells to to specific range like severe/elevated based on cell value
4) It colors cells through css for table id highlight
5) Column class is added to row to color the row for table highlight on being rendered

I have modified/extended the example to two tables with ids highlightfirst and highlightsecond
Following are the changes to existing Example:
1) Added two tables to Dashboard XML with ID highlightfirst and highlightsecond

multiple_table_row_highlighting.XML

<dashboard script="table_row_highlighting_mult.js" stylesheet="table_decorations_mult.css">
  <label>Table Row Highlighting Splunk Answers 476930</label>
  <row>
    <table id="highlightfirst">
      <title>Row Coloring</title>
      <search>
        <query>index=_internal sourcetype=splunkd component=Metrics group=search_concurrency
                    | eval user=coalesce(user, "system total")
                    | bucket _time span=1h
                    | stats avg(active_hist_searches) as active_hist_searches avg(active_realtime_searches) as active_realtime_searches by _time,user</query>
        <earliest>-24h</earliest>
      </search>
      <option name="drilldown">none</option>
    </table>
  </row>
  <row>
    <table id="highlightsecond">
      <title>Row Coloring</title>
      <search>
        <query>index=_internal sourcetype=splunkd component=Metrics group=search_concurrency
                    | eval user=coalesce(user, "system total")
                    | bucket _time span=1h
                    | stats avg(active_hist_searches) as active_hist_searches avg(active_realtime_searches) as active_realtime_searches by _time,user</query>
        <earliest>-24h</earliest>
      </search>
      <option name="drilldown">none</option>
    </table>
  </row>  
</dashboard>

2) Created two Table getVisualization functions for tables highlightfirst and highlightsecond respectively. These call the same CustomRangeRenderer function for comparing cell values and setting the color range to severe/critical for each cell based on value. (PS: If conditions differ then two separate CustomRangeRenderers can be called)

table_row_highlighting_mult.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 _(['active_hist_searches', 'active_realtime_searches']).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 === 'active_hist_searches') {
                if (value > 2) {
                    $td.addClass('range-cell').addClass('range-elevated');
                }
            }
            // Apply interpretation for number of realtime searches
            if (cell.field === 'active_realtime_searches') {
                if (value > 1) {
                    $td.addClass('range-cell').addClass('range-severe');
                }
            }
            // Update the cell content
            $td.text(value.toFixed(2)).addClass('numeric');
        }
    });
    mvc.Components.get('highlightfirst').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());
    });
    mvc.Components.get('highlightsecond').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());
    }); 
});

3) Modified/Extended css file for both tables highlightfirst and highlightsecond

table_decorations_mult.css

/* Row Coloring */
#highlightfirst tr td {
    background-color: #c1ffc3 !important;
}
#highlightfirst tr.range-elevated td {
    background-color: #ffc57a !important;
}
#highlightfirst tr.range-severe td {
    background-color: #d59392 !important;
}
#highlightfirst .table td {
    border-top: 1px solid #fff;
}
#highlightfirst td.range-severe, td.range-elevated {
    font-weight: bold;
}
#highlightsecond tr td {
    background-color: #c1ffc3 !important;
}
#highlightsecond tr.range-elevated td {
    background-color: #ffc57a !important;
}
#highlightsecond tr.range-severe td {
    background-color: #d59392 !important;
}
#highlightsecond .table td {
    border-top: 1px solid #fff;
}
#highlightsecond td.range-severe, td.range-elevated {
    font-weight: bold;
}

[email2vamsi]

Thank you. I am using splunk enterprise 6.5. I would like to color the entire row of the table with green if one of the field value is 1 and color the row red, if the same column value is 0.
How can I achieve this in ui? What's the navigation?

I do not want to color a column.

[niketn]

I have edited my answer and added the sample code for multiple tables with row highlighting by extending the Table Row Highlighting example from Splunk 6.x Dashboard Examples.

[niketn]

[UPDATE]

Table Cell Renderer can be applied to all the tables present in a dashboard dynamically using the solution approach
from one of my recent answer: https://answers.splunk.com/answers/815883/javascript-with-xml-coding.html?childToView=816803#answer-...

@email2vamsi please try out and confirm!