Re: Updating Color for tables

aquinojason · ‎04-19-2021

Hi,

How can I add colors to the table based on the search below? I wanted to have a alternating colors to make the view better.

<panel>
<table>
<search>
<query>index=index1 sourcetype=sourcetype1 ACCOUNT_CODE!=ACCOUNT_CODE | multikv forceheader=1 | dedup ACCOUNT_CODE Application BusinessUnit | table ACCOUNT_CODE Application BusinessUnit ApplicationRTO | chart values(Application) as Application by BusinessUnit</query>
<earliest>0</earliest>
<latest></latest>
<sampleRatio>1</sampleRatio>
</search>
<option name="count">20</option>
<option name="dataOverlayMode">none</option>
<option name="drilldown">cell</option>
<option name="percentagesRow">false</option>
<option name="refresh.display">progressbar</option>
<option name="rowNumbers">false</option>
<option name="totalsRow">false</option>
<option name="wrap">false</option>
<drilldown>
<link target="_blank">/app/mainframe-platform/average_mips_per_application_bu?BusinessUnit=$click.value$</link>
</drilldown>
</table>
</panel>

Thanks and Regards,

ITWhisperer · ‎04-19-2021

A similar question was answered here - depending on which version of splunk you are using, the html may or may not need an empty div - also, this solution was to colour pairs of columns, so you would need to adjust it for just 2n+0 and 2n+1

aquinojason · ‎04-19-2021

Hello @ITWhisperer ,

Thank you for the great assistance. We are currently on build 7.3. I wanted to update the look of the table like the font and color so that users would be able to see it better.

Thanks and Regards,

ITWhisperer · ‎04-19-2021

For version 7, the empty <div/> is important so that the style sheet gets passed through. This doesn't appear to be needed in version 8.

    <panel depends="$stayhidden$">
      <html>
        <div/>
        <style>
          div[id^="tableAlternateColours"] th:nth-child(2n+0){
            background: #cccc00 !important;
            border-right: 0;
            color: white !important;
          }
          div[id^="tableAlternateColours"] td:nth-child(2n+0){
            background: #ffff00 !important;
          }
          div[id^="tableAlternateColours"] th:nth-child(2n+1){
            background: #cc0000 !important;
            border-right: 0;
            color: white !important;
          }
          div[id^="tableAlternateColours"] td:nth-child(2n+1){
            background: #ff0000 !important;
          }
        </style>
      </html>
    </panel>
    <panel>
      <table id="tableAlternateColours">

Updating Color for tables

table

Join the Splunk Community Slack to learn, troubleshoot, and make connections with fellow Splunk practitioners in real time!

Join Splunk User Groups to connect and learn in-person by region or remotely by topic or industry.

Event Series: Splunk Observability Metrics Cost Optimization

Kick the Tires Before You Commit: A Hands-On Tour of the Splunk Observability Cloud ...

Deep insights, no barriers: Splunk Observability Cloud Free Edition

Join the Conversation