topic Re: Need to apply header color based on the header value on the table in Splunk Search

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

DataOrg — Tue, 27 Jun 2023 19:30:06 GMT

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

Re: Need to apply header color based on the header value on the table

woodcock — Fri, 01 Mar 2019 06:35:19 GMT

Attention @niketnilay!

Re: Need to apply header color based on the header value on the table

nikita_p — Fri, 01 Mar 2019 07:23:56 GMT

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

Re: Need to apply header color based on the header value on the table

kamlesh_vaghela — Tue, 05 Mar 2019 06:23:05 GMT

@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

Re: Need to apply header color based on the header value on the table

niketn — Tue, 05 Mar 2019 06:29:28 GMT

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

Re: Need to apply header color based on the header value on the table

niketn — Thu, 07 Mar 2019 17:38:48 GMT

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

Re: Need to apply header color based on the header value on the table

Subham — Wed, 07 Apr 2021 09:57:04 GMT

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?

Re: Need to apply header color based on the header value on the table

KevinMMiller — Tue, 27 Jun 2023 15:48:17 GMT

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