Page MenuHomePhabricator

Implement repeated/fixed/floating table headers
Open, LowPublic

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

Details

Reference
bz40763

Event Timeline

bzimport raised the priority of this task from to Low.Nov 22 2014, 1:00 AM
bzimport set Reference to bz40763.
bzimport added a subscriber: Unknown Object (MLST).

Adding 'floating' and 'fixed' to summary to clarify how we'd probably want to implement such things by dynamically switching them to position:fixed rather than actually repeating.

Moving to the Parser component. I hope this is the right place.

PS: part of https://www.mediawiki.org/wiki/Bug_management/Triage/20130307

Moving to the right component. You need javascript to dynamically switch the styling of a table header like this.

http://datatables.net/extras/fixedheader/

and

http://css-tricks.com/persistent-headers/

are some of the nicest implementations i have seen so far. both require cloning the headers, which is currently not possible with sortable tables.

I think that if we would want to do this, we should split of the thead and tableheader normalization of tablesorter into it's own module and reuse that for fixed headers.

  • Bug 53358 has been marked as a duplicate of this bug. ***
He7d3r set Security to None.
Sdkb raised the priority of this task from Low to Medium.EditedApr 22 2020, 12:30 AM
Sdkb added a subscriber: Sdkb.
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)