Sticky Headers for Table Views

Hi Jr.s,

The above code does work in Full width mode. However, the easiest way to implement sticky header is with CSS only. Like this:

 

CSS:

/* Sticky Headers without javascript */

th {
  position: sticky;
  top: 0px;
}

.kn-table {
  border-collapse: separate !important;
  border-spacing: 1px !important;
}


/* Sticky Headers - Repeat  for each table you want a sticky header   */

#view_xxx .kn-table-wrapper {
max-height: 700px;
}

#view_yyy .kn-table-wrapper {
max-height: 700px;
}

 

Thanks 

Thank you Tony

Dear Mr Tony,

Wish you are well.

Since a week ago , while I was panning the table , the freezed column seems to be sent to back and no longer be visible while panning.

Do you know what’s the cause of this problem?

Thank you so much !

Have a blessed day.

Something change Knack side recently as my sticky headers stopped working @Johnny_Appknowledged_UK provided the below updates CSS, change view_XXXX

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

3 Likes

Hi @CarlHolmes

When I use this code my headers are no longer crossing over with data in the table but the header now moves up and down in the table with the scroll.

This doesn’t happen if i remove “z-index:20’” from the code - but does break the sticky headers again.

Does the code work for you?

There must be some conflicting code. I don’t get this, works fine for me :man_shrugging:

1 Like

Let’s hope that the work Knack are doing on Tables at the moment is going to include sticky headers and first ‘n’ columns!!

2 Likes

@CarlHolmes

Thanks for the code which works perfectly. Just a couple of things to note because I did have issues initially when I tried to use it (copying it).

  1. It is missing the /* and */ in title

/* ==================STICKY HEADERS======================== */

  1. needs to have a space before .kn-table-wrapper

#view_XXX .kn-table-wrapper {
max-height: 700px;
}

Thanks @ZiadQ

I just checked the text file in my Dropbox and those two items were addressed. There is a link in the YouTube video description. :+1:

3 Likes

Hi Carl

I tried those mods but what I end up with isa a table header row that disappears or migrates down the page.
Here what my table display looks like at start


And when scrolling with the code added.

Is something else in the CSS of which I have very limited knowledge causing grief ???

Ray

Looks like you have the app set to “Max Width” in the settings. The code only seems to work if you have it set to “Full Width”. There could be some other conflict with the CSS given the customisation you have.

Yes I played with max width/full width and that seems to be the case.
Unfortunately the look with full width is desirable for our setup.
Will have to put in a bug report I guess.
Find it bit strange that such a standard feature of “tables” across modern computing even has an issue

Hi Ray

We’re like you and prefer Max Width and had the same result using Carl’s code.

We’re currently using the following code which is functional but not visually perfect during scrolling until someone more knowledgeable posts a better solution.

thead {
position:relative;
top:-1px;
z-index:5;
}

Dean

Like minds I found this same reference to the issue being a javascript issue in the stackoverflow forums and with that same solution.

What I WAS also experiencing also is that if a table field is coloured based on a value (i.e GOOD = green background or BAD - red background) the table field title disappears completely.
Same thing applies of the table field is a URL embedded reference.

The solution your offer does do the job of overlaying the info in the table on partially displayed rows and retains the heading title.

I’ve opted to offset by -10px. That places it back where it should be although the small price to pay is a thin gap at the top when first displaying the table. Can live with that for a much more desirable and workable outcome.

This is the way it should be - and thence (I THINK) no need for sticky table headers code.

Added your snippet with my mod as the very first entry on the CSS for my system (as I have no clue where it should be order wise :slight_smile: ).

Works across the board even on modal popups !

Cheers for following through mate - much appreciated

PS Have you changed the color of the background of the header row at all ?
Not managed to find where to put the paramter to get it done successfully.
Followed all the notes metods I could find

Hi Ray

It looks like it requires a combination of CSS and Javascript to achieve a true sticky header rather than the band-aid solution we’re both now using. Unfortunately, I don’t have time at present to solve this minor irritation.

See https://www.w3schools.com/howto/howto_js_sticky_header.asp

Dean

1 Like

Hi Carl. I created a new post showing how one can freeze columns. I don’t know much about CSS coding, I managed to do it with the help of ChatGPT. If you have the time, please take a look at it.

Link to post

Thanks! This was exactly what I needed! I was hoping to put sticky headers on most, if not all our pages. I can’t seem to add another view successfully to the code, though. Can you please let us know:

  1. Is there a way to add sticky headers on all the pages?
  2. How do you edit the code to add sticky headers to additional pages?

Thank you very much!

Hi @Jennifer,

As you may be aware, I’m not a coder. I’m sorry, but I don’t know if it’s possible to have a global snippet to add sticky headers to every table.

That being said, I don’t think I’d want to do that across a whole application personally. Especially as you can vary the view port (height) of each table with the max-height pixel variable.

As I mention in the code example, just repeat for each view that you want to add sticky headers, as per the below example. :+1:

I’ve been using this code for several years with no issues. Almost every client app has a number of views with sticky headers. If you’re finding that it’s not working on multiple views then you may have some other code that is conflicting with it :man_shrugging:

thead {
position:sticky;
top:0px;
z-index:5;
}
#view_1 .kn-table-wrapper {
max-height: 700px;
}
#view_2 .kn-table-wrapper {
max-height: 700px;
}
#view_3 .kn-table-wrapper {
max-height: 700px;
}

1 Like

Thank you so much! That works perfectly! Truly appreciate your help.

1 Like

For years I have wondered and suggested that this should be a standard builder feature for all tables

1 Like