# How to freeze a column in table

**URL:** <https://forum.inductiveautomation.com/t/how-to-freeze-a-column-in-table/92736>\
**Category:** Ignition\
**Tags:** perspective, ignition81\
**Created:** [July 3, 2024, 9:17am UTC](https://forum.inductiveautomation.com/t/how-to-freeze-a-column-in-table/92736 "2024-07-03T09:17:01Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![celo\_Tu](https://avatars.discourse-cdn.com/v4/letter/c/e9bcb4/32.png) [@celo\_Tu](https://forum.inductiveautomation.com/u/celo_Tu)\
**Post date:** [July 3, 2024, 9:17am UTC](https://forum.inductiveautomation.com/t/how-to-freeze-a-column-in-table/92736/1 "2024-07-03T09:17:01Z")

</div>

![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/f/7/f71edc2a7150217440d9c3008d9eaec912986639.png)  
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?

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [July 3, 2024, 1:05pm UTC](https://forum.inductiveautomation.com/t/how-to-freeze-a-column-in-table/92736/2 "2024-07-03T13:05:33Z")

</div>

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

> [@Perspective - View Canvas - replicate Excel spreadsheet - freeze top and left headers?](https://forum.inductiveautomation.com/t/perspective-view-canvas-replicate-excel-spreadsheet-freeze-top-and-left-headers/50400/6):
>
> here ya go: Sorry for the terrible quality, i couldnt upload the big video and seems i reduce it way to much xD the spacing columns and rows is a bit off but its just a demo stuck_out_tongue important things are: for the header position:sticky top:0 left:null for the left one: position:sticky top:null left:0 for the rest: position:absolute or position:relative [ { "position": "sticky", "top": "0px", "left": null, "bottom": "auto", "right": "auto…

---

<div class="post-metadata">

**Author:** ![beck58](https://avatars.discourse-cdn.com/v4/letter/b/f17d59/32.png) [@beck58](https://forum.inductiveautomation.com/u/beck58)\
**Post date:** [July 3, 2025, 1:03am UTC](https://forum.inductiveautomation.com/t/how-to-freeze-a-column-in-table/92736/3 "2025-07-03T01:03:13Z")

</div>

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/](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:  

6. Note if you are using virtualized=true, ensure you change the step 3 css rule to

7. 

```python
/* For step 3.*/
div.ReactVirtualized __Grid__ innerScrollContainer,
div.flexBodyInnerScrollContainer,
div.ia_table__rowGroup,
div.ia_table__row {
    overflow: clip !important;
}

```

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [July 8, 2025, 10:10am UTC](https://forum.inductiveautomation.com/t/how-to-freeze-a-column-in-table/92736/4 "2025-07-08T10:10:52Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![beck58](https://avatars.discourse-cdn.com/v4/letter/b/f17d59/32.png) [@beck58](https://forum.inductiveautomation.com/u/beck58)\
**Post date:** [July 8, 2025, 8:34pm UTC](https://forum.inductiveautomation.com/t/how-to-freeze-a-column-in-table/92736/5 "2025-07-08T20:34:56Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [July 9, 2025, 7:02am UTC](https://forum.inductiveautomation.com/t/how-to-freeze-a-column-in-table/92736/6 "2025-07-09T07:02:39Z")

</div>

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 😛

---

<div class="post-metadata">

**Author:** ![saiful64](https://avatars.discourse-cdn.com/v4/letter/s/ba8739/32.png) [@saiful64](https://forum.inductiveautomation.com/u/saiful64)\
**Post date:** [July 28, 2025, 6:55am UTC](https://forum.inductiveautomation.com/t/how-to-freeze-a-column-in-table/92736/7 "2025-07-28T06:55:04Z")

</div>

> [@Freeze a column in a table](https://forum.inductiveautomation.com/t/freeze-a-column-in-a-table/53568/27):
>
> I’ve implemented a working solution using CSS. As shown in the screenshots, you need to configure the column with position, left, and background-color settings. Make sure to also add the CSS to the stylesheet. @Inductive Automation, please update the global stylesheet to include default CSS for sticky classes. This will ensure that using only position: sticky in selection will function as expected.

---

<div class="post-metadata">

**Author:** ![Alejandro\_Alaco](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/alejandro_alaco/32/59849_2.png) [@Alejandro\_Alaco](https://forum.inductiveautomation.com/u/Alejandro_Alaco)\
**Post date:** [July 28, 2025, 9:38am UTC](https://forum.inductiveautomation.com/t/how-to-freeze-a-column-in-table/92736/8 "2025-07-28T09:38:49Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![NP209](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/np209/32/80704_2.png) [@NP209](https://forum.inductiveautomation.com/u/NP209)\
**Post date:** [October 2, 2025, 7:03pm UTC](https://forum.inductiveautomation.com/t/how-to-freeze-a-column-in-table/92736/9 "2025-10-02T19:03:53Z")

</div>

I tried doing this, but for some reason the column I’m setting up to be sticky isn’t retaining the background stripes.

its like the text is getting separated from the background and overlapping each other. Did you ever run into this?

---

<div class="post-metadata">

**Author:** ![beck58](https://avatars.discourse-cdn.com/v4/letter/b/f17d59/32.png) [@beck58](https://forum.inductiveautomation.com/u/beck58)\
**Post date:** [October 2, 2025, 7:23pm UTC](https://forum.inductiveautomation.com/t/how-to-freeze-a-column-in-table/92736/10 "2025-10-02T19:23:00Z")

</div>

If its not retaining the background stripes then maybe the background-color: inherit isn’t working. I did have the same issue when replicating with a newer project which was odd try this in the style sheet:

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/a/1/a16a15082bfc7f165da68f78c9b2aacb374baf83.png)

and heres the styles props on the sticky column:

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/6/2/6285244886317a52105c105e8b9151a7fc6e43fa.png)

---

<div class="post-metadata">

**Author:** ![NP209](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/np209/32/80704_2.png) [@NP209](https://forum.inductiveautomation.com/u/NP209)\
**Post date:** [October 2, 2025, 8:18pm UTC](https://forum.inductiveautomation.com/t/how-to-freeze-a-column-in-table/92736/11 "2025-10-02T20:18:06Z")

</div>

I had a section of code in my stylesheet that was commented out but seems to have been interfering with it. Once I cleared out my stylesheet and put just this in it worked. Thanks for posting!
