Dashboards & Visualizations

Javascript for highlight text in table - Page Loading issue -How to fix it

New Member


I'm trying to highlight the text in the cell, for the searched text . I have created a table where the count of the ticket will be shown and clicking on the count, displays the details of the ticket. Now the searched word is highlighted in the table cell, but when there is a pagination, it shows randomly (i.e - first page will be blank, but in the 2 or 3rd page the data will be shown,etc..} When exported all the mentioned count of the ticket details are shown in the excel.

Below is the javascript

            ], function(_, $, mvc, TableView) {
                 var CustomIconRenderer = TableView.BaseCellRenderer.extend({
                     canRender: function(cell) {
                        return _(['column name1','column name2']).contains(cell.field);
                     render: function($td, cell) {

                                                var check = "column name1";
                         var hltext;
                        if(check === 'column name1') {
                                                            hltext = ["sample", "run", "test"];
                                                else if(cCheck === 'column name2'){
                                      hltext = ["is", "are"];
                           var i;
                           var strText=cell.value;
                           for (i = 0; i < hltext.length; i++)
                         var regEx = new RegExp(hltext[i], "gi");
                       //Apply regular expression to replace Filter Text with html content bold font and red color
                         strText=strText.replace(regEx, '<b style="color:red;">$&</b>');
                 mvc.Components.get('myTable').getVisualization(function(tableView) {      
                     // Add custom cell renderer, the table will re-render automatically.
                     tableView.addCellRenderer(new CustomIconRenderer());

It would be great ,if the issue is fixed. Had searched for the solution everywhere, have'nt got how to fix the same.

0 Karma


@careanitha @kranitha I had posted this code snippet way back as an answer https://answers.splunk.com/answers/636948/how-to-add-css-class-to-table-field-by-input-in-sp.html

Null values in Table cell rendering cause an issue, refer to one of other answers where table cell render was extended based on another cell but it would not work if required table cell had null value. https://answers.splunk.com/answers/686288/how-do-you-highlight-a-table-cell-based-on-a-field.html

Do upvote the question and accept the answer if they have helped you!

| makeresults | eval message= "Happy Splunking!!!"


@niketnilay- THANKS FOR YOUR quick reply.
Meanwhile can please share your comments on the below link for an issue in monitoring console

0 Karma



Fixed the issue - In the search query , the table will was created, no data for few columns, due to which the page was not loading properly and highlight was render in some or the other page. On adding
| fillnull value=0, the page was loading properly and highlighted the text in all pages.

0 Karma
Get Updates on the Splunk Community!

Registration for Splunk University is Now Open!

Are you ready for an adventure in learning?   Brace yourselves because Splunk University is back, and it's ...

Splunkbase | Splunk Dashboard Examples App for SimpleXML End of Life

The Splunk Dashboard Examples App for SimpleXML will reach end of support on Dec 19, 2024, after which no new ...

Understanding Generative AI Techniques and Their Application in Cybersecurity

Watch On-Demand Artificial intelligence is the talk of the town nowadays, with industries of all kinds ...