Dashboards & Visualizations

Can I use SplunkJS extension to highlight a table row based on cell value (works, but not always)?


To start off, I know that there are threads that already answer this, but those threads existed a long time ago. I have a question with the code that I will provide in the post. For some reason, when I try to apply this JS extension to the dashboard I have, it will not always work. If I refresh the page or go into edit mode... the rows don't stay highlighted.

I'm wondering what would cause this since I thought the table would pre-render each time the page is refreshed or goes into and out of edit mode.

Here's the code for the JS extension...




], function (_, $, mvc, TableView) {
  // row Coloring by String Comparision of check field and True
  let CustomRangeRenderer = TableView.BaseCellRenderer.extend({
    canRender: function (cell) {
      // enable this custom cell renderer for check field
      return _(["check"]).contains(cell.field);
    render: function ($td, cell) {
      // add a class to the cell based on the returned value
      var value = cell.value;

      // apply interpretation for check field
      if (cell.field === "check") {
        if (value === "True") {
      // update the cell content with string value

  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 () {
    // add custom cell renderer, the table will re-render automatically.
    tableView.addCellRenderer(new CustomRangeRenderer());




The CSS is here...




/* Row Coloring */

#highlight tr.range-severe td {
    background-color: #D93F3C !important;

#highlight .table td {
    border-top: 1px solid #fff;

#highlight td.range-severe {
    font-weight: bold;




And finally the XML code to create the dashboard to replicate the issue. I should note that I am on Safari.




<dashboard stylesheet="js_functions:table_row_highlight.css" script="js_functions:table_row_highlight.js">
  <label>JS Row Highlight test</label>
      <table id="highlight">
          <query>| makeresults
| eval id=1
|  eval check="True,False,True,False,False,True,False,True,False,True,False,False,True"
| eval check=split(check,",")
| mvexpand check
| accum id
| eval alert_name="Alert ".id</query>
        <option name="drilldown">none</option>
        <option name="refresh.display">progressbar</option>




Labels (2)
0 Karma
Get Updates on the Splunk Community!

The Splunk Success Framework: Your Guide to Successful Splunk Implementations

Splunk Lantern is a customer success center that provides advice from Splunk experts on valuable data ...

Splunk Training for All: Meet Aspiring Cybersecurity Analyst, Marc Alicea

Splunk Education believes in the value of training and certification in today’s rapidly-changing data-driven ...

Investigate Security and Threat Detection with VirusTotal and Splunk Integration

As security threats and their complexities surge, security analysts deal with increased challenges and ...