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!

The Splunk Success Framework: Your Guide to Successful Splunk Implementations

Splunk Lantern is a customer success center that provides advice from Splunk experts on valuable data ...

Splunk Training for All: Meet Aspiring Cybersecurity Analyst, Marc Alicea

Splunk Education believes in the value of training and certification in today’s rapidly-changing data-driven ...

Investigate Security and Threat Detection with VirusTotal and Splunk Integration

As security threats and their complexities surge, security analysts deal with increased challenges and ...