How to freeze the first column of a table

Hello! I want to freeze the first column of a large table. Someone posted this question in the forum some time ago, but it stayed unanswered. Can someone support me with this?

I see that there are ways to freeze the headers of a column, similar to how you would freeze the top row in Excel. But has anyone come up with a way to freeze the first column so it stays in place as the user scrolls to the right?

My first column is Dates. When the user gets too far to the right in looking for data, it becomes a challenge to know that they're looking at the correct row, since the Date column is no longer visible.

 

2 Likes

I have the same question. Have you found a solution for this problem?

Hi @Sofie - I haven’t had a chance to try the code myself, but check out this post: Sticky Headers for Table Views

Hope that helps! Let me know if it does the trick.

The code changed recently as my tables stopped being sticky :stuck_out_tongue_closed_eyes:.
I am now using the below code provided to me by @Johnny_Parsons_86 - Super simple and works well. Be aware that there is an issue with long drop down menus if they encroach into the table view.

Hopefully this will be a standard option in the future @Jessie :+1::rocket:

Add to CSS, change view_XXXX

/==================STICKY HEADERS========================/
thead {
position:sticky;
top:0px;
z-index:5;
}
/* Sticky Headers - Repeat for each table you want a Sticky Header /
#view_74 .kn-table-wrapper {
max-height: 700px;
}
/
======END========STICKY HEADERS======END================*/

There was some code that I tried in the past with limited success. My understanding was that this was something Knack was working on, but nothing yet.

Posted in wrong section :disappointed_relieved: - Please delete @Jessie

Thank you!!! It works perfectly fine :slight_smile: