test.css

mpreddy · ‎06-25-2019

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.

vasanthmss · ‎07-25-2019

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 · ‎07-25-2019

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 · ‎03-01-2024

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

mpreddy · ‎07-25-2019

this works like a charm

sandeepmakkena · ‎06-25-2019

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;
}

sandeepmakkena · ‎06-26-2019

Did this work ?

mpreddy · ‎06-27-2019

@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;
}

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

test.css

Announcing Scheduled Export GA for Dashboard Studio

Extending Observability Content to Splunk Cloud

More Control Over Your Monitoring Costs with Archived Metrics GA in US-AWS!