search

DataTables / FixedHeader

Fix the header, footer, left or right columns of a table in place, to always show them when scrolling
http://www.datatables.net/
Other
75 stars 83 forks source link

Deprecate fixedHeader in favour of "position: sticky" based solution #98

Open iant-ee opened 5 years ago

iant-ee commented 5 years ago

When you use FixedHeader in Firefox you will see an error in the console: "This site appears to use a scroll-linked positioning effect. This may not work well with asynchronous panning; see https://developer.mozilla.org/docs/Mozilla/Performance/ScrollLinkedEffects for further details and to join the discussion on related tools and features!"

I intend to switch my application over from using FixedHeader to using position: sticky, as recommended in the above article. Once I have done so I will post my findings here as I suspect it would be better for FixedHeader to either be rewritten making use of position: sticky, or for it to be entirely deprecated and documentation written to help people write their own fixed header CSS.

DataTables commented 5 years ago

entirely deprecated and documentation written to help people write their own fixed header CSS.

Ultimately, I would love for that to be the case. The last time I checked only Firefox supported poisition:sticky at all. It looks like the other browsers have moved on it a bit but its still buggy (doing it on the th elements oddly).

If Firefox is your main target, then yes, throw FixedHeader out and used position:sticky. For other browsers, for the time being, this is needed.

iant-ee commented 5 years ago

Shame. I did a quick test in Firefox using thead before opening this and it worked great (no lag, which is noticeable at present). Most browsers support it on TH, I think that will be enough for my use case. The main exceptions are IE11 and Opera mini, I'm happy to gracefully degrade for those browsers. Others may not be.

DataTables commented 5 years ago

I think the main issue with using th is when multiple header rows are used. Reading the Chrome bug on the topic, it appears they have no plan to implement thead support for position:sticky.

carstenfuchs commented 4 years ago

It seems that Firefox 59+ supports position: sticky also on thead and other table elements. It works for me on thead very well and I think it can even be used to fix the leftmost column.

DataTables commented 4 years ago

Yup - I've played around with position:sticky in Firefox before and its a fantastic addition. But without support in Blink / Webkit I don't think we can realistically deprecate FixedHeader yet.