Solved: How to change the default formatting for a table v...

gavinsopra · ‎04-23-2020

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?

niketn · ‎04-27-2020

For changing table header color try the following answer of mine. This answer also shows use of Browser Inspector for CSS Style Override. You can check out existing DOM path and corresponding bootstrap css that you need to override.: https://answers.splunk.com/answers/593399/column-headers-color.html

Do install Splunk Dashboard Examples app from Splunkbase and check out Custom Layout Dark example with dark.css which lists a lot of CSS Style Selectors for various Splunk Elements including table.

For Splunk Style Guide including table, change your Splunk URL to the following location and check out which classes can be used for Bootstrap to work:

http://<yourSplunkServer>:8000/en-US/static/docs/style/style-guide.html#tables

For your specific query, add the following to your existing dashboard with table to test Table Header Color and Alternate row color CSS (PS: Table Cell color formatting will stop working because of this static CSS Style override):

  <html depends="$alwaysHideCSSStyle$">
    <style>
       .table th {
          background-image: linear-gradient(to bottom, #006297, #006297) !important;
          text-shadow: none !important;
       }
       .table th a{
          color: white !important;
       }
      table tr.odd td{
        background: #7ED2FF !important;
      }
      table tr.even td{
        background: #007ABD !important;
      }
      table tr td{
        color: #fff !important;
      }
    </style>
  </html>

Idea is to quickly test in Dashboard and once finalized move to actual CSS file.

Please try out and confirm!

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

View solution in original post

niketn · ‎04-27-2020

For changing table header color try the following answer of mine. This answer also shows use of Browser Inspector for CSS Style Override. You can check out existing DOM path and corresponding bootstrap css that you need to override.: https://answers.splunk.com/answers/593399/column-headers-color.html

Do install Splunk Dashboard Examples app from Splunkbase and check out Custom Layout Dark example with dark.css which lists a lot of CSS Style Selectors for various Splunk Elements including table.

For Splunk Style Guide including table, change your Splunk URL to the following location and check out which classes can be used for Bootstrap to work:

http://<yourSplunkServer>:8000/en-US/static/docs/style/style-guide.html#tables

For your specific query, add the following to your existing dashboard with table to test Table Header Color and Alternate row color CSS (PS: Table Cell color formatting will stop working because of this static CSS Style override):

  <html depends="$alwaysHideCSSStyle$">
    <style>
       .table th {
          background-image: linear-gradient(to bottom, #006297, #006297) !important;
          text-shadow: none !important;
       }
       .table th a{
          color: white !important;
       }
      table tr.odd td{
        background: #7ED2FF !important;
      }
      table tr.even td{
        background: #007ABD !important;
      }
      table tr td{
        color: #fff !important;
      }
    </style>
  </html>

Idea is to quickly test in Dashboard and once finalized move to actual CSS file.

Please try out and confirm!

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

efavreau · ‎04-23-2020

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.

gavinsopra · ‎04-24-2020

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

gavinsopra · ‎04-24-2020

screenshot: https://www.dropbox.com/s/pvqmnuqwzf52qhi/table%20html.png?dl=0

gavinsopra · ‎04-24-2020

<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>

efavreau · ‎04-24-2020

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.

gavinsopra · ‎04-25-2020

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

efavreau · ‎04-27-2020

Thank you. Very clear. What's appearing is your html section in the panel. There's a convention I've stolen from others that can hide it: depends="$alwaysHideCSSPanel$". That's what you're missing. Try this:

<dashboard>
     <label>Test HTML</label>
     <description>Create a simple table using the dashboard editor.</description>
     <row>
       <panel>
         <html depends="$alwaysHideCSSPanel$">
          <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>

###

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

gavinsopra · ‎04-28-2020

efavreau,

That works. I have accepted your answer (but the system won't allow me to award points).

I will raise new questions about problems applying styles using this technic to all parts of the table (even '! important' didn't work when trying to set background in the elements)

Many thanks,
Gavin

gavinsopra · ‎04-24-2020

screen shot - https://www.dropbox.com/s/pvqmnuqwzf52qhi/table%20html.png?dl=0

gavinsopra · ‎04-24-2020

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

efavreau · ‎04-24-2020

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.

gavinsopra · ‎04-24-2020

How to change the default formatting for a table visualization?

Continuing Innovation & New Integrations Unlock Full Stack Observability For Your ...

Monitoring Amazon Elastic Kubernetes Service (EKS)

Cloud Platform & Enterprise: Classic Dashboard Export Feature Deprecation