How to freeze a column in table

[beck58]

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. Note if you are using virtualized=true, ensure you change the step 3 css rule to

7. /* For step 3.*/
   div.ReactVirtualized__Grid__innerScrollContainer,
   div.flexBodyInnerScrollContainer,
   div.ia_table__rowGroup,
   div.ia_table__row {
       overflow: clip !important;
   }