Community Wishlist Survey 2022/Reading/floating table headers

floating table headers

  • Problem: when scrolling a long list, the header label of a column of data scrolls up out of view
  • Proposed solution: implement a feature where, for long lists, column headers (labels) are still visible (floating) as you scroll down.
  • Who would benefit: millions of people
  • More comments: this is a common feature on modern websites. example would be a table that includes country name, population, area in km, area in miles. but it's 100 lines long. so you scroll down & now you don't know which column is miles and which is km. you have to scroll back up & this degrades user experience. Think of freezing a line at the top of a spreadsheet in excel or google docs. this is the same principle, but of course implementing this on wikip will be more dynamic because a table is not the entire document on wikip.
  • Phabricator tickets: T42763
  • Proposer: Skakkle (talk) 23:50, 17 January 2022 (UTC)

Discussion

  • See w:MediaWiki:Gadget-StickyTableHeaders.js and w:MediaWiki:Gadget-StickyTableHeaders.css — Draceane talkcontrib. 22:07, 28 January 2022 (UTC)
    Agreed. This is already an available option in preferences, but apparently many people are unaware this option exists. —The preceding unsigned comment was added by Kimdorris (talk) 30 January 2022‎
    The gadget adds sticky column headers to all non-scrolling tables:
    See: w:Special:Preferences#mw-prefsection-gadgets. Search for "sticky" to find: "Make headers of tables display as long as the table is in view, i.e. 'sticky' (requires Chrome v91+, Firefox v59+, or Safari)." Unfortunately, it doesn't do sticky side headers, though. That would be helpful in tablets, and smaller notebooks. I tested the gadget again just now in Firefox, Edge, and Chrome. It works in all 3 in Windows 10 on my desktop PCs. Only problem is in Firefox where the internal header borders are missing. Here is a page to test it on that has complicated headers:
    w:List of U.S. states and territories by incarceration and correctional supervision rate.
    In desktop view while on my iPhone SE 2020 the gadget makes the column headers sticky. In mobile view while on my iphone the gadget does not make those column headers sticky.
    There are scrolling Covid-19 tables with a template style that makes both column and row headers sticky. The sticky headers work in desktop and mobile browsers. Tested in Safari, Edge, Chrome, and Firefox. For more info see:
    w:User:Timeshifter/Sandbox169. --Timeshifter (talk) 17:00, 2 February 2022 (UTC)
  • Let's not forget to make row headers left sticky so all relevant headers are always in view when scrolling large tables on small devices. Jroberson108 (talk) 05:01, 2 February 2022 (UTC)

Voting