Page MenuHomePhabricator

Implement repeated/fixed/floating/sticky table headers
Open, LowPublicFeature

Assigned To
None
Authored By
TheDJ
Oct 4 2012, 10:37 AM
Referenced Files
F35130089: Screen Shot 2022-05-11 at 12.55.11 PM.png
May 11 2022, 11:56 AM
F35130048: Screen Shot 2022-05-11 at 12.32.16 PM.png
May 11 2022, 11:32 AM
F35130044: Screen Shot 2022-05-11 at 12.30.20 PM.png
May 11 2022, 11:32 AM
F35130045: Screen Shot 2022-05-11 at 12.30.10 PM.png
May 11 2022, 11:32 AM
Tokens
"Like" token, awarded by Jack_who_built_the_house."Like" token, awarded by W.andrea."Like" token, awarded by Speedysloth730."Mountain of Wealth" token, awarded by Quiddity.

Description

With longer tables it can be very difficult to identify the columns. It might be nice if table headers stayed in view when scrolling trough a long table.

This could be done with JS, but would need to be compatible with tablesorter of course.

Thinking about 'fixed' position headers once the header moves out of the screen viewport. Can possibly do similar stuff with footers.


Version: 1.21.x
Severity: enhancement
See Also: T12013: Implement client-side filtering of tables using javascript

Event Timeline

There are a very large number of changes, so older changes are hidden. Show Older Changes
Sdkb raised the priority of this task from Low to Medium.EditedApr 22 2020, 12:30 AM
Sdkb subscribed.
Aklapper lowered the priority of this task from Medium to Low.Apr 22 2020, 8:49 AM

@Sdkb: No updates, otherwise they would be in this task. :) Do you plan to work on fixing this task, as you increased the priority of this task? If so, please set yourself as assignee - thanks!

Today I found the class mw-sticky-header being automatically applied to some tables on enwiki. As far as I can see, it only works in Safari and only on desktop. Does somebody know more about this?

EDIT: Oh, I could have just read the thread again, my bad. So it's TheDJ's gadget from 2017. But how come i only see this now? I have not changed my preferences recently.

This is possible in pure CSS these days with minimal dodginess; see for example the .floatable-header CSS at https://yugipedia.com/wiki/MediaWiki:Common.css and an example usage at https://yugipedia.com/wiki/Historic_Forbidden/Limited_Chart.

FYI, this task recently came up at the Village Pump, showing continuing interest.

Anyone interested feel free to work on a patch, please: https://www.mediawiki.org/wiki/How_to_become_a_MediaWiki_hacker - thanks in advance!

I just noticed that apparently the tables with sticky headers I created on dewiki don’t work anymore if I activate the new Vector skin! How can the skin interfere with this effect? Noticed this on Chrome.

@XanonymusX: Please always provide links to test cases so other people could try to reproduce without having to somehow search for pages first. Thanks.

My question was whether there was a known interference of the new vector with position:fixed in table headers, not about a specific case.

Anyway, random example (taken from the Community Wishlist): most tables here have sticky headers. Works fine in old Vector and in all up-to-date browsers. With new vector position:fixed apparently is completely ignored (at least in Chrome).

Update: Chrome 91 will ship with working position:fixed for <thead> and <tr> elements (I tested and it works), so this is much closer to reality now and all main browsers will support it soon.

That means it is only details on 'when'/'how' to enable this functionality that remain to be determined.

Note that position fixed for thead gets disabled inside scroll containers (like used by us on mobile), this is a technical limitation of the CSS specification: https://bugs.chromium.org/p/chromium/issues/detail?id=702927#c59

I just noticed that apparently the tables with sticky headers I created on dewiki don’t work anymore if I activate the new Vector skin! How can the skin interfere with this effect? Noticed this on Chrome.

My question was whether there was a known interference of the new vector with position:fixed in table headers, not about a specific case.

Anyway, random example (taken from the Community Wishlist): most tables here have sticky headers. Works fine in old Vector and in all up-to-date browsers. With new vector position:fixed apparently is completely ignored (at least in Chrome).

It was related to scrollable containers used for the skin's layout, similar to what @TheDJ mentioned above. This also caused problems with VisualEditor and other tools (e.g. T270146, T264679), and in the end the skin was changed to avoid breaking things. Looks like the fixed headers also work again now.

I'm going to be deploying an update to my gadget on en.wp soon. This includes the fix for the collapsed borders + sticky. Unfortunately it seems that in Safari 14 there are now several problems with sticky table elements. The most noticeable is that the space that a table caption takes up is added above the sticky element. All these problems should be fixed in Safari 15 pretty soon however (according to the upstream tickets)

I'm not sure if this helps any, but I've done some work on making table headers sticky while scrolling both on desktop and mobile browsers since Dec 4, 2020. This work is on my sandbox since I'm not familiar with the Wikipedia project/task workflow. Since this is my sandbox, the CSS/JS won't be included for you unless you are logged in as me. The only workaround I can think of is for you to reproduce the CSS and JS files in your sandbox.

https://en.wikipedia.org/wiki/User:Jroberson108/sandbox
https://en.wikipedia.org/wiki/User:Jroberson108/common.css
https://en.wikipedia.org/wiki/User:Jroberson108/common.js

This code works fine for the majority of the tables, which have one row of column headers and/or one column of row headers, and works with "sortable".

For multi-tiered headers, there are some issues where the second-tier header stacks above its first-tier header instead of sticking to its side. For desktop browsers, it works fine unless the first-tier row header is grouped and its second-tier isn't grouped (no column header issues). For mobile browsers, everything stacks. (e.g. https://en.wikipedia.org/wiki/User:Jroberson108/sandbox#Dual-tier_columns_and_rows)

I tested those tables. For desktop browsers (Windows 10: Chrome & Firefox), the sticky column headers work, but the row headers (country cells) weren't sticky. For mobile browsers (Android: Chrome & Firefox), there were no sticky headers. Mobile browsers are where it is needed the most because of the small screen size.

Just an update on the issues I mentioned above in regards to the work I did. I figured out a fix for the desktop browser issue, which has been implemented.

The only issue left is on mobile browsers when there are multi-tiered column or row headers. The headers are sticky, but they become stacked when scrolling away. As far as I can tell, JavaScript isn't able to get the row height or column width on mobile browsers so I can assign it to the respective "top" and "left" values to prevent stacking. I've got a note on this in the JS file. The table may need to render first before they are set? Otherwise, the sticky column and/or row headers appear to work fine in mobile browsers.

https://en.wikipedia.org/wiki/User:Jroberson108/sandbox

@Jroberson108
Is there someplace you can set this up so we can see it in action as you make changes? Wikimedia Labs?:
*https://www.mediawiki.org/wiki/Wikimedia_Labs

@Timeshifter
The page you linked to says "This page is obsolete. It is being retained for archival purposes." I'm not really sure where I can set it up.

As for the code, although the majority of the use cases are covered, it's still a work-in-progress in regards to the more complex use cases like only making certain headers sticky versus all.

@Jroberson108
There must be somewhere you can post this so that others can see it. I am afraid to point to other wikis such as Shoutwiki, etc.. They are often not using the latest version of Wikimedia. What about Toolforge:
*https://wikitech.wikimedia.org/wiki/Help:Toolforge

I redid the styles for the large COVID-19 tables and added some additional features like a column of left-sticky row headers. Below are the styles and a few tables.

We found (see talk) that the new styles work on all tested browsers except iPhone (WebKit) browsers. The "position: sticky;" style works on iPhone if not on the Wikipedia site, but not on the Wikipedia site, so the mobile site's styles might be interfering. Unfortunately, I don't have any Apple products to test with. The same may be true with help from Wikipedia:Village pump (technical)#Sticky table headers not working on iPhone. Any iPhone help appreciated.

With some adjustments and fine tuning, these styles could be moved to a "Big table" template so the styles can be included above the table's div wrapper, similar to how "{{Import-blanktable}}" and "{{Static row numbers}}" work. The "big-table" class would be added to the div that wraps the table.

For tables with two rows of top-sticky column headers, I kept it simple with pure CSS and height/nowrap restrictions. Ideally, JavaScript would instead be used to set "top" for the second based on the first's "height", which would remove the need for height/nowrap restrictions. I didn't provide any links to tables with two top-sticky rows since the tables I updated didn't need them. Because of the JavaScript potential, it might be better to implement in Wikipedia's core instead of a template.

@TheDJ Thanks for implementing a fix for iPhones.

Aklapper changed the subtype of this task from "Task" to "Feature Request".Feb 4 2022, 11:14 AM
Aklapper removed a subscriber: TrevorParscal.
Pols12 subscribed.

Note style="position:sticky; top:0" workaround meets an issue with new Vector sticky header (the site header displays over the table header).

Note style="position:sticky; top:0" workaround meets an issue with new Vector sticky header (the site header displays over the table header).

That has been addressed in T289817.

Indeed, sorry: I incorrectly tested this.

Still in Timeless, though.

Change 790697 had a related patch set uploaded (by Daniel Kinzler; author: Daniel Kinzler):

[mediawiki/core@master] Extract table normalization out of tablesorter

https://gerrit.wikimedia.org/r/790697

Change 791000 had a related patch set uploaded (by Daniel Kinzler; author: Daniel Kinzler):

[mediawiki/core@master] WIP: add sticky header support.

https://gerrit.wikimedia.org/r/791000

With @daniel's patch applied to Vector2010, here's a sample output

Screen Shot 2022-05-11 at 12.30.10 PM.png (852×2 px, 284 KB)

Screen Shot 2022-05-11 at 12.30.20 PM.png (898×2 px, 223 KB)

But on Vector 2022, the sticky header hides the sticky table header.

Screen Shot 2022-05-11 at 12.32.16 PM.png (622×2 px, 153 KB)

Change 791014 had a related patch set uploaded (by D3r1ck01; author: Derick Alangi):

[mediawiki/skins/Vector@master] resources: Make sortable wikitable stick underneath sticky title

https://gerrit.wikimedia.org/r/791014

With the sticky header in Vector2022 and sticky header in a sortable wikitable and a new patch applied, we now get.

Screen Shot 2022-05-11 at 12.55.11 PM.png (1×3 px, 313 KB)

Lectrician1 renamed this task from Implement repeated/fixed/floating table headers to Implement repeated/fixed/floating/sticky table headers.Mar 17 2023, 9:41 PM

It might be worthwhile to only make headers sticky for tables of a certain size and above.

I've created a gadget for this:
https://en.wikipedia.org/wiki/Special:Preferences#mw-prefsection-gadgets
Currently inside the Testing and development section

It should work for all versions of Safari, most recent versions of Chrome (though less optimal), some versions of Firefox (support is a bit sketchy there).

It seems to be.. buggy on Timeless when the table is wider than the article view area... Fine after editing (using VE) as it overflows, but on refresh it's broken again...

Timeless has a script that makes wide tables horizontally scrollable that might be conflicting.

Timeless has a script that makes wide tables horizontally scrollable that might be conflicting.

Correct. This is one of the problems that are hard to tackle. Sticky is relative to the first parent scrollcontext. But the skin offset (for the header) for sticky is relative to the top scroll context. This means that as we don’t really know all the situations where extra scrollers exist, it is hard to have universal CSS rules for timeless and vector 2022. The only reliable way around this, might be with JavaScript looking for scroll contexts, to set a specific class which opts out of the offset. I haven’t fully dived into that yet.

This comment was removed by Timeshifter.

Change 791014 abandoned by D3r1ck01:

[mediawiki/skins/Vector@master] [WIP] resources: Make sortable wikitable stick underneath sticky title

Reason:

https://gerrit.wikimedia.org/r/791014

Ah, yes it worked ----aaaaaah .. just not:

as explained in
https://en.wikipedia.org/wiki/Template:Sticky_header
I copy/pasted: {{sticky header}}
above the code generating this very long and wide table, but the data from the 150 lines scrolls and reappears above the sticky header :

https://en.wikipedia.org/wiki/Template_talk:Sticky_header#sticky_header_template_works_just_about_-_just_makes_the_data_in_the_lines_scroll_under_it_and_reappear_above_the_sticky_header_:)