Table cell renderer does not work on Firefox

[VatsalJagani]

I've very similar javascript as below in my dashboard which adds up the color in the table. As I've updated dashboard.css I cannot utilize XML color palette, so I had to use table cell renderer.

require([
     'underscore',
     'jquery',
     'splunkjs/mvc',
     'splunkjs/mvc/tableview',
     'splunkjs/mvc/simplexml/ready!'
 ], function(_, $, mvc, TableView) {

     var CustomRangeRenderer = TableView.BaseCellRenderer.extend({
         canRender: function(cell) {
             // Point-C
             return _(['My Column Name', 'Name']).contains(cell.field);
         },
         render: function($td, cell) {
             // Point-D
             if(cell.value=="red" || cell.value=="green" || cell.value=="yellow")
             {
                 $td.html("<div class='circle_"+cell.value+"'></div>")
             }
             else if(cell.value=="NoData" || cell.value=="null")
             {
                 $td.html("<div class='align_center'></div>")
             }
             else
             {
                 $td.html("<div class='align_center'>"+cell.value+"</div>")
             }
         }
     });

     //List of table IDs to add icon
     var tableIDs = ["Mytable1", "Mytable2"];
     for (i=0;i<tableIDs.length;i++) {
         var sh = mvc.Components.get(tableIDs[i]);
         if(typeof(sh)!="undefined") {
             sh.getVisualization(function(tableView) {
                 // Add custom cell renderer and force re-render
                // Point-A
                 tableView.table.addCellRenderer(new CustomRangeRenderer());
                 tableView.table.render();
                 // Point-B
             });
         }
     }     
 });

My code is able to execute properly in Chrome.
While running in Firefox it reaches Point-A and Point-B but not to Point-C or Point-D. Any idea what can be wrong or any workaround.
While in Firefox also the issue is intermittent, at some random time out of two tables any one loads as well, but not all the time. Anyone have any idea why TableCellRenderer does not work in firefox sometimes?

[niketn]

@VatsalJagani this has been a bug in Splunk Table Cell render extension since Splunk 6.6 and above. Please refer to the previous question with a workaround with setTimeout to add a delay before table is rendered().

https://answers.splunk.com/answers/614788/splunk-dashboard-examples-table-row-highlighting-b.html?ch...

[VatsalJagani · Accepted solution]

The issue is because JS loads before the dashboard. I found a workaround as follows.

Add one line at the end of your JS.

  ...........
                  tableView.table.render();
                  // Point-B
              });
          }
      }
      setToken("wait_for_js_to_load", " ");
  });

Prepend this token in all the table queries which have custom cell renderer. Ex.

$wait_for_js_to_load$ index=main | stats count by sourcetype

I found this issue in Splunk 8.0.1.

Hope this helps other people having same issue.

[sreichel]

This worked great for me. I found that I needed to use the "submitted" rather than "default" instance.

let sub_tokens = mvc.Components.getInstance("submitted");
...
sub_tokens.set("js_ready", " ");