Dashboards & Visualizations

displaying odd row as black color and even row as white color in simple table results module using application.js and css file

madanashok
Path Finder

Hi Splunkers,

I would feel great if somebody help me to display the table results with even row in one color and
odd row in one color using simple results table module.

Tags (1)
0 Karma

sideview
SplunkTrust
SplunkTrust

The approach suggested by jonuwz that uses the :nth-child CSS selector will work on newer browsers just fine. If you want a simple solution that will work even on older browsers though, here's an extra option.

Download and install the latest Sideview Utils and use the sideview Table module.

Then add some search language, either on the end of your base search or using a PostProcess module:

If you tacked on some search language like so:

 | streamstats count | eval evenOrOdd=if(isint(count/2),"even","odd")

That will give each row a field called evenOrOdd, that will be either "even" or "odd". Then you can use the Table module's rowClass param to specify that this field should be used as the classname. Additionally we'll use the hiddenFields param to specify that the evenOrOdd field should not actually appear in the rendered table.

<module name="Table">
  <param name="rowClass">$row.fields.evenOrOdd$</param>
  <param name="hiddenFields">evenOrOdd</param>

Last but not least, you would just add this simple custom CSS to specify the two colors:

.Table tr.even td {
    background-color:#eeeeee;
}
.Table tr.odd td {
    background-color:#cccccc;
}
0 Karma

bmacias84
Champion

There is a cool app on Splunk Base called rowcolorizer. This should do what you want and more.

Hope this helps.

robertpa
Engager

I downvoted this post because this is a dead link.

0 Karma

jonuwz
Influencer

You don't really need application.js ( if you're using a fairly recent browser )

Just put this in application.css - you'll need to restart unless application.js already exists :

tr:nth-child(2n) {
     background: none repeat scroll 0% 0% #000000;
}

tr:nth-child(2n) td {
    color: #DDDDDD;
}

abulco01
Explorer

This worked perfectly! Thank you so much!

0 Karma
Take the 2021 Splunk Career Survey

Help us learn about how Splunk has
impacted your career by taking the 2021 Splunk Career Survey.

Earn $50 in Amazon cash!