Perspective Table Sticky Column

Ignition
,
1

So I am trying to get the first column of my perspective table to stay visible as I scroll through the rest of my table. I was able to get this to work as intended on the table header fairly easily but when I apply the same CSS to the first column in the table cells they don't react the same way. I would think that it has something to do with fact that the individual rows for the table data is nested in multiple containers but I haven't been able to find anything through dev tools that made it react the way I want it to or is conflicting with these styles. Is there some Javascript behind the scenes that is forcing the table to ignore that quality while it is inside the scroll container?

Here is the style class that I am using for the first column of the table. If there is more information that I would need to give to help solve this issue let me know.

.psc-sticky-column{
	position: sticky !important;
	left: 0;
	z-index: 1;
	background-color: var(--neutral-30);
}

Edit:
After some more research I found that this has already been asked for many times. Is there some workaround that people have figured out? Such as somehow hiding the vertical scroll bar on a left table and just syncing up it's position to the vertical scrollbar of a second table.

2

The feature to Freeze one or more columns on the Perspective Table component has been in the Development phase. There is unfortunately no workaround and currently no release date set for this feature, but I can add this forum post to the internal Feature request ticket to escalate the feature. You can also upvote this feature on our Ideas page.

3

It is a bit painful, but if you are in a pinch, you can create your own custom table via the View Canvas component. Even though it doesn't give it as an option, it will honor the position: sticky for the templates inside of the canvas (credit to @victordcq with this post). I ended up having to go this route - but I will add that I found it was a steep learning curve to get to a solution that looked "good" and was performant.

1 Like
4

That would be great, thank you.

5

Can you share this resource?