Splunk Search

How to change table header alignments?

kdimaria
Communicator

The table header's alignments seem completely random. Some are aligned to the left and others are aligned to the right. Is there a way to make them all the same? I know how to change the alignments of the cells but I want to change the headers.

alt text

0 Karma

niketn
Legend

@kdimaria, adding on the the point by @kmaron, Splunk adds following three classes to table data timestamp, string and numeric. While timestamp and string columns are left aligned, numeric columns are right aligned. And the behavior is same for both Table Header as Well Table Body (i.e. Data Rows). You can use CSS to apply your own style override for numeric class to be aligned left. Following code can be added to Simple XML Dashboard to align both Header and Body text to left for numeric fields (where table id is tableWithCSSToAlignHeaderText😞

  <row depends="$alwaysHideCSSPanel$">
    <panel>
      <html>
        <style>
          #tableWithCSSToAlignHeaderText table thead th.numeric,#tableWithCSSToAlignHeaderText table tbody tr td.numeric{
            text-align:left !important;
          }
        </style>
      </html>
    </panel>
  </row>

Following is a run anywhere dashboard example in Simple XML based on Splunk's _internal index.

<dashboard>
  <label>Table Column Header Alignment</label>
  <row depends="$alwaysHideCSSPanel$">
    <panel>
      <html>
        <style>
          #tableWithCSSToAlignHeaderText table thead th.numeric,#tableWithCSSToAlignHeaderText table tbody tr td.numeric{
            text-align:left !important;
          }
        </style>
      </html>
    </panel>
  </row>
  <row>
    <panel>
      <title>Table with CSS to Align Header Text</title>
      <table id="tableWithCSSToAlignHeaderText">
        <title>Splunk _internal Last 10 Errors</title>
        <search>
          <query>index=_internal sourcetype=splunkd log_level!=INFO
|  bin _time span=1h
|  stats count by _time component log_level
|  head 10</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
          <sampleRatio>1</sampleRatio>
        </search>
        <option name="count">20</option>
        <option name="dataOverlayMode">none</option>
        <option name="drilldown">none</option>
        <option name="percentagesRow">false</option>
        <option name="rowNumbers">true</option>
        <option name="totalsRow">false</option>
        <option name="wrap">true</option>
      </table>
    </panel>
  </row>
</dashboard>

Alternative to above approach you can also move the following CSS code to a static CSS file and refer the same in your dashboard, after uploading to appserver/static folder. As stated earlier the table ID used in the following example is tableWithCSSToAlignHeaderText:

          #tableWithCSSToAlignHeaderText table thead th.numeric,#tableWithCSSToAlignHeaderText table tbody tr td.numeric{
            text-align:left !important;
          }
____________________________________________
| makeresults | eval message= "Happy Splunking!!!"

kmaron
Motivator

I believe the alignment has to do with the type of data in the field(s). Anything numeric will be right aligned.

Get Updates on the Splunk Community!

What's new in Splunk Cloud Platform 9.1.2312?

Hi Splunky people! We are excited to share the newest updates in Splunk Cloud Platform 9.1.2312! Analysts can ...

What’s New in Splunk Security Essentials 3.8.0?

Splunk Security Essentials (SSE) is an app that can amplify the power of your existing Splunk Cloud Platform, ...

Let’s Get You Certified – Vegas-Style at .conf24

Are you ready to level up your Splunk game? Then, let’s get you certified live at .conf24 – our annual user ...