Dashboards & Visualizations

How to freeze ONLY first column in table when scrolling the table to right or left

mpreddy
Communicator

Hi Splunkers,
Anyone have a working code (javascript or CSS) to freeze ONLY first column when scrolling that table to right or left,
I had a table with 65 columns.

Thanks.

0 Karma
1 Solution

vasanthmss
Motivator

Here is the sample code which used _internal index,

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

V

View solution in original post

vasanthmss
Motivator

Here is the sample code which used _internal index,

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

V

good20
New Member

This XML allowed me to freeze the first column and column title:

<row depends="$never$">
<panel>
<html>
<style>
#myTable div [data-view="views/shared/results_table/ResultsTableMaster"] td:nth-child(1) {
position: fixed;;
left: 0 !important;;
z-index:9 !important;;
position: sticky !important;
}
#myTable div [data-view="views/shared/results_table/ResultsTableMaster"] th:nth-child(1) {
position: fixed;;
left: 0 !important;;
z-index:9 !important;;
position: sticky !important;
}
</style>
</html>
</panel>
</row>

Then, use the myTable as the id in the <table> id

0 Karma

mpreddy
Communicator

this works like a charm

0 Karma

sandeepmakkena
Contributor

If you want a table where only the columns scroll horizontally, you can position: absolute the first column

table {
border-collapse: separate;
border-spacing: 0;
border-top: 1px solid grey;
}

td, th {
margin: 0;
border: 1px solid grey;
white-space: nowrap;
border-top-width: 0px;
}

div {
width: 500px;
overflow-x: scroll;
margin-left: 5em;
overflow-y: visible;
padding: 0;
}

.headcol {
position: absolute;
width: 5em;
left: 0;
top: auto;
border-top-width: 1px;
/only relevant for first row/
margin-top: -1px;
/compensate for top border/
}

.headcol:before {
content: 'Row ';
}

.long {
background: yellow;
letter-spacing: 1em;
}

0 Karma

sandeepmakkena
Contributor

Did this work ?

0 Karma

mpreddy
Communicator

@sandeepmakkena

Nope it is not working.

Below is the sample code i tried.

<dashboard stylesheet="test.css">
  <label>test</label>
  <row>
    <panel>
      <table>
        <search>
          <query>|stats count|eval aaa="1",bbb="2",ccc="3",ddd="4",eee="5",fff="6",ggg="6",hhh="7",iii="9",jjj="5",kkk="4",lll="4",mmm="5",nnn="3",ooo="4",ppp="3",qqq="2",rrr="4",sss="4",ttt="2",uuu="5",vvv="9",xxx="4",yyy="2",zzz="2"</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="refresh.display">progressbar</option>
        <option name="rowNumbers">false</option>
        <option name="totalsRow">false</option>
        <option name="wrap">true</option>
      </table>
    </panel>
    <panel>
      <table>
        <search>
          <query>index=_internal|stats c by sourcetype|head 1</query>
          <earliest>-15m</earliest>
          <latest>now</latest>
        </search>
        <option name="count">10</option>
        <option name="drilldown">none</option>
        <option name="refresh.display">progressbar</option>
      </table>
    </panel>
  </row>
</dashboard>

test.css

table {
border-collapse: separate;
border-spacing: 0;
border-top: 1px solid grey;
}

td, th {
margin: 0;
border: 1px solid grey;
white-space: nowrap;
border-top-width: 0px;
}

div {
width: 500px;
overflow-x: scroll;
margin-left: 5em;
overflow-y: visible;
padding: 0;
}

.headcol {
position: absolute;
width: 5em;
left: 0;
top: auto;
border-top-width: 1px;
/only relevant for first row/
margin-top: -1px;
/compensate for top border/
}

.headcol:before {
content: 'Row ';
}

.long {
background: yellow;
letter-spacing: 1em;
}

0 Karma
Get Updates on the Splunk Community!

2024 Splunk Career Impact Survey | Earn a $20 gift card for participating!

Hear ye, hear ye! The time has come again for Splunk's annual Career Impact Survey!  We need your help by ...

Optimize Cloud Monitoring

  TECH TALKS Optimize Cloud Monitoring Tuesday, August 13, 2024  |  11:00AM–12:00PM PST   Register to ...

What's New in Splunk Cloud Platform 9.2.2403?

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