Splunk Search

How to apply header color based on the header value on the table?

DataOrg
Builder

I have 10 columns and want to color header alone with different color codes based on value of the header since column will be filtered and sorted will not remain in the same position we cant map color based on the position of the header

0 Karma

niketn
Legend

@premranjithj refer to one of my older answers: https://answers.splunk.com/answers/612296/how-to-change-the-header-color-dynamically-using-j.html

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"
0 Karma

niketn
Legend

@premranjithj if your issue is resolved, do accept the answer to mark this question as answered!

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"
0 Karma

kamlesh_vaghela
SplunkTrust
SplunkTrust

@premranjithj

You can use CSS. You have to define CSS on the basis of the value of the header.

th[data-sort-key='<<HEADER_VALUE>>'] {
    <<HEADER_VALUE_BASED_CSS>>
    }

Check below example.

mydashboard.xml

<dashboard stylesheet="test.css">
  <label>Color Table Headers</label>
  <row>
    <panel>
      <table>
        <title>Test</title>
        <search>
          <query>index=_internal | stats count by host,sourcetype, source</query>
          <earliest>-60m@m</earliest>
          <latest>now</latest>
        </search>
        <option name="drilldown">none</option>
      </table>
    </panel>
  </row>
</dashboard>

test.css

th[data-sort-key='source'] {
background-color: aqua!important;
}


th[data-sort-key='host'] {
background-color: antiquewhite !important;
}

th[data-sort-key='sourcetype'] {
background-color: burlywood!important;
}

th[data-sort-key='count'] {
background-color: chartreuse!important;
}

Here, in my table, I have 4 columns (host,sourcetype, source, count). According to the value of headers, I have defined background-color. You can change stylesheet as per your need.

Just try and let me know.

Thanks

KevinMMiller
Engager

This worked perfectly for me.  Very straightforward solution.  Thanks for posting it.

0 Karma

Subham
Loves-to-Learn Lots

I tried using this code (put the .CSS file in apps/appserver/static) but was unable to change color for the values in header for my table.. I have some static headers values and need to change the color for them.. Can anyone help please?

0 Karma

nikita_p
Contributor

Hi,
Kindly check the link below on Splunk answers. It might help you.
https://answers.splunk.com/answers/198494/colouring-header-of-the-table-in-splunk.html

0 Karma

woodcock
Esteemed Legend

Attention @niketnilay!

0 Karma
Career Survey
First 500 qualified respondents will receive a $20 gift card! Tell us about your professional Splunk journey.

Can’t make it to .conf25? Join us online!

Get Updates on the Splunk Community!

Community Content Calendar, September edition

Welcome to another insightful post from our Community Content Calendar! We're thrilled to continue bringing ...

Splunkbase Unveils New App Listing Management Public Preview

Splunkbase Unveils New App Listing Management Public PreviewWe're thrilled to announce the public preview of ...

Leveraging Automated Threat Analysis Across the Splunk Ecosystem

Are you leveraging automation to its fullest potential in your threat detection strategy?Our upcoming Security ...