Splunk Search
Highlighted

How to change the default formatting for a table visualization?

New Member

I would like to change some of the formatting of a Statistics Table in a dashboard, specifically the following:

  • header row background
  • alternate row backgrounds
  • text colour

I have found a number of articles that talk about changing rows or cells based on values in the table but that's not what I want. I just need to manipulate the CSS (I guess) so that I can apply our 'house style' to the tables.

I would like to apply different colour schemes to different tables in the same dashboard.
I am running Splunk Enterprise 8.0.2.

Is this possible?

0 Karma
Highlighted

Re: How to change the default formatting for a table visualization?

Builder

Hi @gavinsopra!

There's a lot of places here in Splunk Answers to pick up a nugget or two of information to get you where you are looking to go. Yes, it's possible. If you're familiar with CSS, it will get you a lot further. 🙂

In this answer, https://answers.splunk.com/answers/587679/how-do-i-hide-table-headers.html, they go into the simple xml of their dashboard, and label their header with an id. Then they used custom css (in an html block within their panel) to style that table how they wanted. In their case, they wanted the table header hidden. In your case, you'll have whatever style on whichever table parts you decided on.

To do a different table in your dashboard, use a different id, and then call it out in it's own css, and style it as you would like.

###

If this reply helps you, an upvote would be appreciated.
0 Karma
Highlighted

Re: How to change the default formatting for a table visualization?

New Member

efavreau,
Thanks for the response. That seems very promising and I have found the reference for the HTML tag now in the Simple XML Reference
[link text][1]

I have tried this approach using the "Table Element" table from the "Splunk Dashboard Examples".
It works but adding the tag to the panel appears to cause an extra in the table which distorts the table. Also, only a few of my CSS changes are getting applied.

Here is the simple XML for two instances of the Table Elements example side by side as separate panels in the same row.
I have added my HTML 'style' to the first table and you can see the extra appearing above the

0 Karma
Highlighted

Re: How to change the default formatting for a table visualization?

New Member

Bugger. None of the links nor the line code work in comments!!!

0 Karma
Highlighted

Re: How to change the default formatting for a table visualization?

New Member

alt text

0 Karma
Highlighted

Re: How to change the default formatting for a table visualization?

Builder

Use the button that looks like 101010. That allows you to mark things as code. It's not perfect, but better than nothing.

###

If this reply helps you, an upvote would be appreciated.
0 Karma
Highlighted

Re: How to change the default formatting for a table visualization?

New Member
<dashboard>
    <label>Test HTML</label>
    <description>Create a simple table using the dashboard editor.</description>
    <row>
      <panel>
        <html>
         <style>
           #modifyTableHeader th{
             background: #ba6e5e;
             color: white;
             font-size:28px;
           }
           #modifyTableHeader tr:nth-child(even){
             background-color: red !important;
             color: white !important;
             font-size: 20px;
           }
           #modifyTableHeader tr:nth-child(odd) {
             background-color: orange !important;
             color: white !important;
             font-size: 8px;
           }
         </style>
       </html>
        <table id="modifyTableHeader">
            <title>Top Sourcetypes (Last 24 hours)</title>
            <search>
                <query>index=_internal | top limit=100 sourcetype | eval percent = round(percent,2)</query>
                <earliest>-24h@h</earliest>
                <latest>now</latest>
            </search>
            <option name="wrap">true</option>
            <option name="rowNumbers">true</option>
            <option name="dataOverlayMode">none</option>
            <option name="drilldown">cell</option>
            <option name="count">10</option>
        </table>
      </panel>
      <panel>
        <table>
            <title>Top Sourcetypes (Last 24 hours)</title>
            <search>
                <query>index=_internal | top limit=100 sourcetype | eval percent = round(percent,2)</query>
                <earliest>-24h@h</earliest>
                <latest>now</latest>
            </search>
            <option name="wrap">true</option>
            <option name="rowNumbers">true</option>
            <option name="dataOverlayMode">none</option>
            <option name="drilldown">cell</option>
            <option name="count">10</option>
        </table>
      </panel>
    </row>
</dashboard>
0 Karma
Highlighted

Re: How to change the default formatting for a table visualization?

New Member
0 Karma
Highlighted

Re: How to change the default formatting for a table visualization?

Builder

Anytime I use CSS in a dashboard, I mark it with !important to make sure it overrides existing values.
Some people use imgur.com or 0bin.net for screenshots. That way it doesn't take your dropbox space. I see where you change the text size in places, but not the cell/row size. Maybe that's why your table is getting misshapen.

###

If this reply helps you, an upvote would be appreciated.
0 Karma
Highlighted

Re: How to change the default formatting for a table visualization?

New Member

Here is a simpler example. I have added HTML which just changes the background of 'thead' but doing this seems to add and extra div above the title; notice where "Top Source (last 24 hours" appears in the two table.

<dashboard>
    <label>Test HTML</label>
    <description>Create a simple table using the dashboard editor.</description>
    <row>
      <panel>
        <html>
         <style>
           #modifyTableHeader th{
             background: #ba6e5e;
           }
         </style>
       </html>
        <table id="modifyTableHeader">
            <title>Top Sourcetypes (Last 24 hours)</title>
            <search>
                <query>index=_internal | top limit=100 sourcetype | eval percent = round(percent,2)</query>
                <earliest>-24h@h</earliest>
                <latest>now</latest>
            </search>
            <option name="wrap">true</option>
            <option name="rowNumbers">true</option>
            <option name="dataOverlayMode">none</option>
            <option name="drilldown">cell</option>
            <option name="count">10</option>
        </table>
      </panel>
      <panel>
        <table>
            <title>Top Sourcetypes (Last 24 hours)</title>
            <search>
                <query>index=_internal | top limit=100 sourcetype | eval percent = round(percent,2)</query>
                <earliest>-24h@h</earliest>
                <latest>now</latest>
            </search>
            <option name="wrap">true</option>
            <option name="rowNumbers">true</option>
            <option name="dataOverlayMode">none</option>
            <option name="drilldown">cell</option>
            <option name="count">10</option>
        </table>
      </panel>
    </row>
</dashboard>

Screenshot here link text
https://www.dropbox.com/s/bisx7uur3drztge/table%20html%202.png?dl=0

0 Karma