Hello all,
I have below javascript code that I use to change the color of my table cell:
require([
'underscore',
'jquery',
'splunkjs/mvc',
'splunkjs/mvc/tableview',
'splunkjs/mvc/simplexml/ready!'
], function(_, $, mvc, TableView) {
var CustomRangeRenderer = TableView.BaseCellRenderer.extend({
canRender: function(cell) {
return _(['Performance']).contains(cell.field);
},
render: function($td, cell) {
var label = cell.value.split("|")[0];
var val = cell.value.split("|")[1];
if(val=="high")
{
$td.html("<div class='css_for_high'>"+label+"</div>")
}
else if(val=="low")
{
$td.html("<div class='css_for_low'>"+label+"</div>")
}
else if(val=="no")
{
$td.html("<div class='css_for_no'>"+label+"</div>")
}
else
{
$td.html("<div class='align_right'>"+label+"</div>")
}
}
});
//List of table IDs to add icon
var tableIDs = ["customTable"];
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
tableView.table.addCellRenderer(new CustomRangeRenderer());
tableView.table.render();
});
}
}
});
My table has a column "Performance" with samples values like, "99.75|high", "100.00|low", etc.
What the code does is get these values of column "Performance", split it, and then change the color depending on val.
Now, I have a table that looks something like this:
The number of columns increases or decreases depending on the time picker chosen by the user.
What should I put in line:
return _(['Performance']).contains(cell.field);
to make all the column with date headers be read by the javascript code?
Just guessing, but try changing return _(['Performance']).contains(cell.field);
to return true;
Answered by @jacobevans, change line return _(['Performance']).contains(cell.field);
to return true;
.
@dojiepreji You should accept @jacobevans 's answer. I have converted his comment to answer. 🙂
Thanks 🙂 I had no idea if it would work!
Just guessing, but try changing return _(['Performance']).contains(cell.field);
to return true;