topic Re: How to hold the table header, when using splunk JS. in Splunk Enterprise

How to hold the table header when using Splunk JS?

jabezds — Mon, 15 Aug 2022 22:02:24 GMT

We are working on a table creation, where in we are just passing the SPL query to the splunk JS, which populates the table in the UI.

>My problem is that im not able to hold the table headers ,when scrolled it ,it does not stay.

>Also if I scroll horizontally I have to go all the way to the end of the table layout to scroll horizontally.

Any help or suggestion will help greatly.

Thanks,

Jabez.

Re: How to hold the table header, when using splunk JS.

sloshburch — Thu, 04 Aug 2022 20:02:30 GMT

To be honest, I haven't played with Splunk JS and am not experienced in javascript either. I'm no help lol. Nonetheless, I've reposted this in the #appdev channel for Splunk User Groups and have asked some other folks internally to look at this.

It sounds like when the page scrolls the header scrolls as well and you want it to stay fixed on the screen. I'm no javascript developer but maybe there is a general (not Splunk) javascript way of doing that? As in, is this a Splunk question or a general javascript question for which more javascript forums could also yield help?

I also wonder if the solution is now recommended through SplunkUI rather than Splunk JS.

Re: How to hold the table header, when using splunk JS.

splunkian — Thu, 04 Aug 2022 20:05:46 GMT

Have you tried utilizing sticky positioning with some CSS?

https://stackoverflow.com/questions/8423768/freeze-the-top-row-for-an-html-table-only-fixed-table-header-scrolling

https://developer.mozilla.org/en-US/docs/Web/CSS/position#sticky_positioning

Re: How to hold the table header, when using splunk JS.

jabezds — Tue, 09 Aug 2022 07:28:43 GMT

Thanks,

we tried various approaches, but this one worked for us.

-->Override the splunk table CSS , with the below code change. Make sure to change the data view path according to your table

#incidents_hash div [data-view="YOUR_DATA_VIEW_PATH"]{
overflow-y: auto !important;
height: 300px !important;

       }
        #incidents_hash div [data-view="YOUR_DATA_VIEW_PATH"] table{
        border-collapse: collapse !important;
          width: 10px !important;

       }
        #incidents_hash div [data-view="YOUR_DATA_VIEW_PATH"] th {
          position: sticky !important;
          text-align: left !important;
          top: 0 !important;
        }

Re: How to hold the table header, when using splunk JS?

ryanoconnor — Wed, 10 Aug 2022 13:53:17 GMT

Can I ask what app this is for? Much like @sloshburch mentioned, I would recommend looking into the Splunk UI Toolkit. As part of that Toolkit, we have actively developed React Components that can be used inside of a React app in Splunk.

Here is a link to our Table Component: https://splunkui.splunk.com/Packages/react-ui/Table

Here is a Code Sandbox showing how you would set a table header to "fixed"

https://codesandbox.io/s/7xqj28?file=/demo.jsx

Re: How to hold the table header, when using splunk JS.

sloshburch — Mon, 15 Aug 2022 22:00:28 GMT

Make sure to "Accept as Solution" (button) so others can learn from your experience. Yay!