Skip to content

✨ A sticky header row for the interactive needtable #1925

Open

Description

@chrisjsewell

#1464's review liked a sticky header row for long needtables, and #1920 deliberately left it out: the widget's scroll frame (div.needstable-scroll, overflow-x: auto) is a scroll container, and a position: sticky header sticks to its nearest scrolling ancestor rather than to the viewport, so a sticky <th> inside it does nothing while the page scrolls.

Options, to be measured rather than argued:

  • give the frame a bounded height (e.g. a max-height in vh, opt-in via a data-needstable-* attribute) so the header sticks inside the frame — this also gives very long "All rows" pages a scroll region instead of a page-long table;
  • keep the frame unbounded and make the header sticky to the viewport by moving the horizontal-scroll responsibility elsewhere (the reviewers on ♻️ Replace DataTables with an in-place, dependency-free needtable enhancer #1920 found no layout that does both without a wrapper the host theme can defeat);
  • a theme-provided solution — sphinx_rtd_theme and sphinx-immaterial already wrap tables in their own containers, which is the first thing a sticky header would have to survive.

Whatever wins has to keep the header's background opaque in dark mode (the transparent sticky header was a review finding on #1464) and pass the theme gallery (poe docs-needs-shots, #1921).

Follow-up from #1920.

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementpkg: sphinx-needsThe sphinx-needs distribution (packages/sphinx-needs): its code, tests and docs

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions