Highlighting the row of a table with respect to the condition of a single column

Highlighting the row of a table with respect to the condition of a single column

Hope all of you people are doing really well. We already discussed cell coloring with respect to a different cell, but have you thought what if highlighting the complete row of a table.

If you looking forward to the same problem then follow this blog step by step. I hope,  I can make it count for you.

So let’s start.

So let’s take an example, suppose we have a table like this.

Now according to the condition of field “number” we going to highlight the complete row if the condition is matched. The condition is shown below.

So at first,

Create java-script and CSS files, which are provided below.

( row_highlighting.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 _(['number']).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 === 'number') {

                 if (value > 4 ) {

                     $td.addClass('range-cell').addClass('range-elevated');

                 } else if (value >= 2 && value <= 4 ) {

                     $td.addClass('range-cell').addClass('range-severe');

                 }

                                     }

                         

             // Apply interpretation for number of realtime searches

           

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

     });

 });

And the CSS is given below. ( table_decorations_CSS.css )

/* Custom Icons */

 td.icon {

     text-align: center;

 }

 td.icon i {

     font-size: 25px;

     text-shadow: 1px 1px #aaa;

 }

 td.icon .severe {

     color: red;

 }

 td.icon .elevated {

     color: orangered;

 }

 td.icon .low {

     color: #006400;

 }

 /* Row Coloring */

 /*#highlight tr td {

     background-color: #c1ffc3 !important;

 }*/

 #highlight tr.range-elevated td {

     background-color: #ff0000 !important;

 }

 #highlight tr.range-severe td {

     background-color: #ffff00 !important;

 }

 /*#highlight tr.range-aa td {

     background-color: #c1ffc3 !important;

 }*/

 #highlight .table td {

     border-top: 1px solid #fff;

 }

 #highlight td.range-severe, td.range-elevated {

     font-weight: bold;

 }

 .icon-inline i {

     font-size: 18px;

     margin-left: 5px;

 }

 .icon-inline i.icon-alert-circle {

     color: #ef392c;

 }

 .icon-inline i.icon-alert {

     color: #ff9c1a;

 }

 .icon-inline i.icon-check {

     color: #5fff5e;

 }

After creating these files put them in the following path.

$SPLUNK_HOME/etc/apps/<app name>/appserver/static

And restart your Splunk server.

In the next step, open the dashboard, click edit and go-to source code then within the dashboard write the file names of you java-script and CSS. also provide the table id which is mentioned in the java-script. as shown in the below figure.

That’s it save and refresh the page once and changes will be in front of you.

Yup!! What is this that was not our requirement right, where is the color? Did we make any mistakes?

Nope, don’t worry. Want to see the magic then just go to edit and change the pagination (i.e. rows per page )

Now save and refresh and go to the second page and magic will play his part.

I hope your time is not wasted here, and that’s all about Highlighting the row of a table with respect to the condition of a single column.

Happy Splunking!!