Are there any near changes planned to switch to position: sticky for fixed header/footer cells?

sebastianbarth

We are having performance and alignment problems with the multi-table approach to get a fixed header/footer to the table. Currently datatables draws three footers, one for the header, one for the body and one for the footer. Only the body set up to follow scrolling vertically.

The fixedColumns also did split the table up into three tables, one for the left fixed columns, one for the non-fixed in the center and one for the right fixed columns. Recently this was changed toward using the CSS property/value postion: sticky.

Are there any changes planned in the very near future toward using position: sticky for fixed headers and footer in vertical scrolling, too?

allan

I'd love to do that as it would take so much complexity out of DataTables! But there are a couple of issues that are stopping me from doing so.

Here is a little example of using position: sticky for the headers and footers in a scrolling table: http://live.datatables.net/ritanoma/1/edit .

Two immediate issues:

1. I really dislike the scrollbar going over the table header (and it would for the footer if that worked as well). It feels like really bad UX since those elements don't scroll.
2. The header / footer is sticky to the scrolling container, but as you move the page it isn't sticky to the document (only to its offset parent).

I'm not aware of any workarounds for these two issues. I think most other things that I've tripped over in the past with it have been resolved by the browsers.

Allan

sebastianbarth

Thank you for your fast reply.

The provided link doesn't work. Could you check it again, please?

I understand your concern #1, but wonder why this is an issue you are caring about. If this is a real problem it would be one for all usages of position: sticky, not only for tables. Additionally header and footer are usually only very small parts compared to the scrollable body.

Issue #2 I din't understand. Could you elaborate?

Thank you,
Sebastian

sebastianbarth

BTW: For #1 I asked the swarm. Let's see what it comes up with:
https://stackoverflow.com/questions/75383285/avoid-scrollbars-next-to-sticky-part

allan

The provided link doesn't work. Could you check it again, please?

You might need to use Firefox. Chrome sometimes tries to redirect to https: but our live pages are only on http: at the moment (I'm working on fixing that).

Hopefully point 2 will be clearer when you can see the example. With point 1, having the scrollbar over the header, suggests to me that the header should be part of the scrolling. It isn't. What I really want is to be able to do:

tbody {
  overflow: auto;
  height: 300px;
}

But that only works if we were to add display: block to it, at which point the columns won't align.

Allan

AnthonyV

I decided to try and implement sticky columns in DataTables.net and managed to succeed to the point where I am reasonably happy with it. I will attempt to post a live link sometime today.

allan

That'd be awesome - I look forward to seeing what you cook up.

Allan

AnthonyV

NOTE: I built the following because of the "Additional complexity" notice on the "fixedcolumns" extension.

I also wanted to be able to allow my users to mark ANY columns as sticky, and it would then float until it hit the edge.

Here is a link to a working sample using the CSS { position:sticky }

https://live.datatables.net/woqegaka/3/edit

The footer does not work correctly but I generally skip the footer in my application.

I chose to build something using the Sticky CSS functionality because I did not want the extra complexity of the multiple tables which keeps messing with the layout.

AnthonyV

NOTE: I use "autoWidth" because without it the header and details columns don't track correctly. Sometimes they still don't track perfectly but usually only minorly.

allan

Awesome - thanks for posting this. I'm not clear on how this is different from our FixedColumns extension which uses position: sticky? Here's an example.

Allan

AnthonyV

Hmmm, Okay, guess I am confused. I saw the note on https://datatables.net/extensions/fixedcolumns/

which said:

"It is important to state up front that utilising FixedColumns in your DataTable can significantly increase the complexity of the table and its use should not be undertaken lightly, particularly for complex tables. The reason for this is in how FixedColumns operates - the fixed columns are actually separate tables from the original DataTable (i.e. they are separate table elements) which are styled to look like they are visually part of the original table. These fixed tables are then positioned over the original DataTable."

That is why I went the sticky route....

allan

My apologies - that text is out of date. That was true before FixedColumns 4, but v4 made use of position: sticky instead of cloning and floating tables over the rest of the table. I will correct that just now.

Allan

AnthonyV

I guess I should have dug deeper.

Does or will FixedColumns include support for columns that are not the first or last?

You can see this in the live version I created, I added a few extra columns to make it clear...

https://live.datatables.net/woqegaka/9/edit

allan

Does or will FixedColumns include support for columns that are not the first or last?

You can fix any number of columns at the left or right of the table. You cannot fix one in the middle. Example here.

Allan

AnthonyV

Thanks. I am rather fond of the floating columns that stay on screen, so I will have to decide if I want to give them up and move to the official FixedColumns or maintain my own code.

Either way, thanks for your work.