Splunk Enterprise

How to hold the table header when using Splunk JS?

jabezds
Path Finder

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.

jabezds_0-1658834630613.pngjabezds_1-1658834677596.png

 

0 Karma
1 Solution

jabezds
Path Finder

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

View solution in original post

0 Karma

ryanoconnor
Builder

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

0 Karma

sloshburch
Splunk Employee
Splunk Employee

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.

 

0 Karma

jabezds
Path Finder

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

0 Karma

sloshburch
Splunk Employee
Splunk Employee

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

0 Karma
Get Updates on the Splunk Community!

Index This | I am a number, but when you add ‘G’ to me, I go away. What number am I?

March 2024 Edition Hayyy Splunk Education Enthusiasts and the Eternally Curious!  We’re back with another ...

What’s New in Splunk App for PCI Compliance 5.3.1?

The Splunk App for PCI Compliance allows customers to extend the power of their existing Splunk solution with ...

Extending Observability Content to Splunk Cloud

Register to join us !   In this Extending Observability Content to Splunk Cloud Tech Talk, you'll see how to ...