Dashboards & Visualizations

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

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

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

View solution in original post

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

View solution in original post

Communicator

this works like a charm

0 Karma

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

Contributor

Did this work ?

0 Karma

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