How to freeze a column in table


I want to freeze the left column of table , so I set the position to sticky.
But it didn't work !
Is there any way to do it?

The table is constructed in rows not columns, so this is not possible to do with just css.

all you can do is constructing your own table like this

2 Likes

Yes it is possible it doesn't work immediately because you need the inset properties and you need it to attach to the correct parent.
Here is how you do it:

  1. Set position: sticky;
  2. Set atleast one of the inset properties: i.e (left:0; since we want it on the left)
  3. Ensure it attaches to correct ancestor by checking there are no hidden scrolling areas between the ancestor of choice and the sticky component (See attached https://polypane.app/blog/getting-stuck-all-the-ways-position-sticky-can-fail/). Hence I changed the overflow from hidden to clip within style.css (from what I understand there are the same hidden just allows some sort of programatic scrolling)
  4. Set the z-index to a positive non zero value.
  5. Redraw background
    Do this in the column you want:

    Do this in stylesheet.css and change the id to the field name of the column

    Heres is a screen recording of it in action
6 Likes

hm oke this kinda works but having to use z-index will make it break on certain settups (like popups)

overflow clip is interesting though, i have never used it

3 Likes

Hmm actually good point about the z-index I'll keep a eye on it and see if it causes any issues. I didn't see any issues as of yet with our popups so I assume it is localized.

z-index are not localised (thats the whole point of it).
I remember perspective used zindexes somewhere for sure.

Anyways aslong it works its fine :stuck_out_tongue:

2 Likes
2 Likes

Great! will try! Freeze column is much needed for large tables.