developer guide
Sticky Group Headings in a Data Grid
When a group is taller than the viewport its heading stays pinned at the top of the body, so the reader always knows which group the rows belong to. grid.rows.groupHeadings() reports the same context to your own chrome.
Developer guide › Sorting, filtering and find › Sticky Group Headings in a Data Grid
Sticky group headings
Scrolling inside a group keeps that group's headings pinned above the rows, so the rows on screen always say which group they belong to. Nested groups stack, up to a cap.
Off by default; opt in or set the cap
createGrid(element, { stickyGroupHeaders: true }); // on, up to two
createGrid(element, { stickyGroupHeaders: 3 }); // on, up to threeThis could not be position: sticky. The heading row is very
often not in the page at all: the grid renders a window of rows, and a heading five hundred
rows above the viewport was recycled long ago. So the pinned heading is synthesised from
whichever group the top visible row belongs to, which the grid answers by binary search over
an index it builds while flattening the rows, the ten-thousandth row of a group costs what
the second one does.
The cap exists because each heading costs a row of viewport. A five-level grouping without one would spend a third of the screen describing what the other two thirds contain.
The pinned headings are hidden from assistive technology. Each is a duplicate of a row that is already in the tree, and announcing it again would report a group the reader has not moved to, and add an entry to a row count that virtualisation already makes hard to reconcile.
The same answer is available directly as grid.rows.groupHeadings(index), which
returns the enclosing group rows outermost first, for a breadcrumb, or a heading elsewhere on
your page.