How to freeze the first column of a table

API & Customization Ask Developers
1

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?

2

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.

 

3 Likes
3

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

4

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.

5

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_Appknowledged_UK - 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 @Les :+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================*/

6

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.

7

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

8

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

9

Hi everyone! Looking for a little further help understanding the need for a sticky or frozen column in a table view. If anyone who sees this could chime in with more real-world use cases that benefit from a sticky column, that would help us out! A few other specific questions:

  1. Do you anticipate freezing more than one column in a table view, if so, up to how many?
  2. Would there ever be a need to freeze a column on the right side of the table? Such as in situations where an international user is consuming the data in the view from right to left?

Any other detail you can provide is appreciated at this point. Hoping to get this one off the ground soon!

1 Like
10

Hey @Les - good to hear that there are plans to introduce sticky columns. Does this mean that sticky headers will also be happening. I use sticky headers frequently, far more than sticky columns.

Anyway, sticky columns, or in the Excel world, “freezing columns”. The ability to freeze up to three columns on the left hand side would cover most requirements I can think of.

I avoid having tables so wide that you need to scroll horizontally, negating the need for any sticky columns. However, I do have one client that is insistent the table contains all the objects fields, so it has about 50 columns.
In this example we have the first column sticky displaying the Product Code.

I don’t see any reason to freeze columns on the right hand side. Wide tables will always be off the screen to the right, unless you are going to shift the table and start it from the right hand side and it would then scroll left.

2 Likes
11

Bumping this conversation!

1 Like
12

Jessie,
Is there any status update on creating “sticky” columns on the left side? Or like in Excel a freezing a column or header so that a key field is always visible while scrolling left to right or up and down. The Stick header disappears on me a lot, is there a reason for that? any timing on this would be appreciated.

1 Like
13

@Barbara - Jessie is no longer at Knack.

Given the current focus on other items I’m not sure that this is going to be forthcoming quickly. I’ve been using the sticky headers code for a couple of years and not had any issues.

CSS


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

I see a lot about how to create a sticky header but no one ever answered how to create a sticky column. Here’s the CSS for a sticky column:

tbody tr > :first-child {
    position: sticky;
    z-index: 1;
    left: 0;
    background: #ddd;
}

You can add a #view_id or #scene_id in front of the “tbody” to target specific views/scenes. You can also increase the number of sticky columns by increasing “first-child” to your desired number. This will replicate the spreadsheet software functionality we all love and need that allows us to Freeze Panes by Column.

PS: I find it hilarious that a Knack team member asked the community, “Why is Freeze Panes helpful?”. If you don’t know why it’s helpful then you should join my company because they have no idea either lol. But seriously, freeze panes are helpful to make data easy to read by freezing a header row or by freezing very important columns that should always be visible from the left such as Dates, Status, Names, Projects, etc:

3 Likes
15

Hi, Quick question about “You can also increase the number of sticky columns by increasing “first-child” to your desired number.”

I would like to stick column 1 and 2, which is the right sentence?

Rgds, Pablo.

16

Ah, I suppose I should have explained that better. Here’s a real world example I used in my application to freeze the first and second columns of a table from a specific view in CSS:

#view_2952 tbody tr > :first-child, #view_2952 tbody tr > :nth-child(2) {
    position: sticky;
    z-index: 1;
    left: 0;
    background: #ddd;
}

If you want to freeze more columns then add another comma up top and target the next column you’d like to freeze. The number 2 in the nth-child(n) selector represents the second column. We could change the number to nth-child(3) and that would freeze the third column… so on and so forth.

6 Likes
17

Many Thanks Robert. Very usefull.
Rgds, Pablo

18

I cannot believe this was such an easy fix. Thank you so much.

19

Have just made a cool post for this on Appknowledged

With this complimentary code snippet, the first column of your table can be “pinned” or “stuck” to its initial position, remaining visible as you scroll rightward through the table. Conveniently, the code also offers functionality to “unpin” the column, allowing it to move normally with horizontal scrolling. Should you need the column pinned back, it can be easily re-stuck in place with a simple click.

2 Likes
20

Nice addition of having a pin :pushpin: @Johnny_Appknowledged_UK