Table: Add a sticky header option
Closed this issue · 1 comments
The problem
If there is a lot of data in a table, it is hard to read. When I scroll down through the rows the table header scrolls out of view and it becomes harder to read the table because I have to remember what column means what. If it is a large table with horizontal scrolling, it becomes even more difficult to keep in mind what each column means.
The solution
There is an option added to the table component to make the header sticky.
Additional information
It looks like this may be possible by targeting the <th> elements directly with css: https://css-tricks.com/position-sticky-and-table-headers/
Something to keep in mind for future reference, when we introduce focusable elements within the table, there may be a risk that the currently focused element is hidden behind the sticky header. Examples of this issue can be described in this Gov.UK post about sticky elements. Relevant WCAG 2.2 success criteria, 2.4.11 Focus Not Obscured (minimum).