Splunk Search

Combining custom_table_row_expansion.js and table_cell_highlighting.js in a dashboard

Path Finder

Hi all,
I've succeeded in making a table with custom_table_row_expansion,js which expand every rows publishing the child events of a correlated father.
Now I'm tryingto apply table_cell_highlighting to colour the child new event with a color for the dalay.

I've combined table_cell_highlighting.js in the dashboard. In the custom_table_row_expansion.js I set the id of the new table highlight, I made a style css inside the dashboard in the hidden panel:

    <panel depends="$alwaysHideCSS$">
          .table>thead>tr>th {
                  color: #0066ff !important;
                  text-shadow: none;
                  font-family :  Verdana !important;

          .table>thead>tr>th:hover {
                  /*background-image: linear-gradient(to bottom, #666, #444) !important;*/
                  color: #000000 !important;
                  text-shadow: none;

          .table .sorts a {
              text-decoration: none;
              font-weight: bold;
              font-size: 12px ;
              color: #002966;
          .table>tbody>tr {
                  width: 20%;
                  color: #006699;
                  font-family :  Verdana !important;
                  font-size: 11px !important;
                  font-family :  Verdana !important;

          #highlight tr.range-elevated td {
               background-color: #000000 !important;
               color: #ffffff;

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

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

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

and the javascript is this one:

 ], function(_, $, mvc, TableView) {

      // Row Coloring by String Comparision of Numeric Time Value in HH:MM:SS

     var CustomRangeRenderer = TableView.BaseCellRenderer.extend({
         canRender: function(cell) {
             // Enable this custom cell renderer for DELAY field
             return _(['DELAY']).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 DELAY field
             if (cell.field === 'DELAY') {
                 if (value >= "02:00:00") {
                 if (value < "02:00:00" && value > "01:30:00") {

             // Update the cell content with string DELAY value HH:MM:SS

     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());

But nothing happened when I expand the rows.
Any suggestion ?


0 Karma
Get Updates on the Splunk Community!

Enterprise Security Content Update (ESCU) | New Releases

In the last month, the Splunk Threat Research Team (STRT) has had 2 releases of new security content via the ...

Announcing the 1st Round Champion’s Tribute Winners of the Great Resilience Quest

We are happy to announce the 20 lucky questers who are selected to be the first round of Champion's Tribute ...

We’ve Got Education Validation!

Are you feeling it? All the career-boosting benefits of up-skilling with Splunk? It’s not just a feeling, it's ...