Archive

How to freeze first 3~4 columns in a table

Explorer

How to freeze first 3~4 columns in a table view in a dashboard

Tags (1)
0 Karma

Motivator

Here is the sample code which used _internal index and freezes first column with similar logic for other columns.

myTable is the table id, and using hidden html style applied the css. Make sure that one extra column with similar to first column. here frozen column is host , created one more column host1 which holds the same data.

<dashboard hideEdit="false">
  <label>Fixed Column Test</label>
  <row depends="$never$">
    <panel>
      <html>
        <style>
          #myTable div [data-view="views/shared/results_table/ResultsTableMaster"] td:nth-child(1) {
              position: fixed;
             }
             #myTable div [data-view="views/shared/results_table/ResultsTableMaster"] th:nth-child(1) {
              position: fixed;
             }
        </style>
      </html>
    </panel>
  </row>
  <row>
    <panel>
      <table id="myTable">
        <search>
          <query>index=_internal sourcetype=splunkd |head 100 |eval host1=host | table host,host1, _time, sourcetype, source date* _raw *</query>
          <earliest>-60m@m</earliest>
          <latest>now</latest>
          <sampleRatio>1</sampleRatio>
          <refresh>5m</refresh>
          <refreshType>delay</refreshType>
        </search>
        <option name="count">15</option>
        <option name="dataOverlayMode">none</option>
        <option name="drilldown">none</option>
        <option name="percentagesRow">false</option>
        <option name="rowNumbers">false</option>
        <option name="totalsRow">false</option>
        <option name="wrap">false</option>
        <format type="color" field="index9">
          <colorPalette type="sharedList"></colorPalette>
          <scale type="sharedCategory"></scale>
        </format>
        <format type="color" field="host">
          <colorPalette type="sharedList"></colorPalette>
          <scale type="sharedCategory"></scale>
        </format>
      </table>
    </panel>
  </row>
</dashboard>

Note: This uses column fix so if you have bigger table or multiple table you may see the fixed column for a while then it will hide. Use rows per page to limit the records.

Hope that helps,

Cheers !!!

Explorer

Yeah, I get it.. Do we have any sample css for this ?

0 Karma

Champion

Probably not. Check google and stackoverflow for examples of how to freeze table columns, and then use browser developer tools or Splunk answers to identify the specific CSS elements to target.

0 Karma

Communicator

If you are looking for Excel related features try to implement JQuery with Html in splunk

URL for JQuery for freeze:

https://plugins.jquery.com/tablefreeze/

@ravitejaj

You can give a try like this

base query |table * |fields - a,b,c,d

0 Karma

Explorer

This will just restrict the number of fields that gets displayed.. I need all the fields.. say for ex: I have 10 fields, First 3/4 on the left should freeze while others Scroll.

0 Karma

Contributor

Ah you mean like you can in Excel. Hmm.

0 Karma

Explorer

This is for table representation.. What I'm looking for is to freeze the first 2~3 columns on the left while others can be scrolled while we have he results on Wrap OFF.

0 Karma

Champion

That is something different.

This will require custom CSS on your table. You will have to add a CSS file to the dashboard to set the appropriate CSS settings on the first 2-3 columsn. You cannot do what you are requesting in SimpleXML.

0 Karma

Explorer

Yes exactly..

0 Karma

Champion

Does my answer work for you? | table field1 field2 field3 field4 ...

If you want more help, share your query.

0 Karma

Champion

The community can best help you if you provide details about the search you are using.

My first guess is that you want to use the table search query where you would list the fields you want first, e.g., | table field1 field2 field3 field4 ...

0 Karma
State of Splunk Careers

Access the Splunk Careers Report to see real data that shows how Splunk mastery increases your value and job satisfaction.

Find out what your skills are worth!