Splunk Search

How to change table header alignments?

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

SplunkTrust
SplunkTrust

@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!!!"

Motivator

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