Answers

• allan Posts: 63,498Questions: 1Answers: 10,470 Site admin

  February 2023

  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 Posts: 43Questions: 11Answers: 0

  February 2023

  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 Posts: 43Questions: 11Answers: 0

  February 2023

  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 Posts: 63,498Questions: 1Answers: 10,470 Site admin

  February 2023

  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 Posts: 37Questions: 7Answers: 0

  February 2023

  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 Posts: 63,498Questions: 1Answers: 10,470 Site admin

  February 2023

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

  Allan
• AnthonyV Posts: 37Questions: 7Answers: 0

  February 2023

  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 Posts: 37Questions: 7Answers: 0

  February 2023 edited February 2023

  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 Posts: 63,498Questions: 1Answers: 10,470 Site admin

  February 2023

  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 Posts: 37Questions: 7Answers: 0

  February 2023

  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 Posts: 63,498Questions: 1Answers: 10,470 Site admin

  February 2023

  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 Posts: 37Questions: 7Answers: 0

  February 2023

  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 Posts: 63,498Questions: 1Answers: 10,470 Site admin

  February 2023

  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 Posts: 37Questions: 7Answers: 0

  February 2023

  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.