### Feedback Please provide your feedback in the below Task: https://gitlab.com/gitlab-org/gitlab/-/work_items/593218+ ### **Description** As a product manager, I want to be able to freeze the top row of tables in GitLab so that users can always see column headers when viewing or referencing large tables, making it easier to understand and interpret data regardless of how far they scroll. ### **Problem Statement** When working with large tables (e.g., validation rules with many rows and columns), users often lose context when scrolling down. For instance, when directed to row 76 of a 100-row table, users cannot see the column headers, making it difficult to interpret the data and leading to confusion and reduced productivity. This is particularly frustrating in GLQL embedded table views where users can't see: * Which table they're viewing (panel title) * Column headers that identify what data they're looking at * Access to table controls (collapse/expand, actions menu) ### **Proposed Solution** Implement sticky/frozen header functionality for tables in the rich text editor that keeps the top row visible while scrolling through table content. Sticky headers will be on by default for all tables with no user setting or toggle on hover. ### **Technical Considerations** **Current Architecture Context:** GLQL tables use custom Vue components with a presenter architecture (`app/assets/javascripts/glql/components/presenters/`) rather than Pajamas Design System components. This architecture was chosen for specific technical reasons: * **Resizeable Columns**: `GlTable` and `GlTableLite` do not support resizeable columns, which was a requirement for GLQL views * **Performance & Bundle Size**: Pajamas table components are quite heavy and would increase bundle size * **Flexibility**: Custom components provide flexibility for GitLab-specific object rendering (labels, users, health status with popovers) **Sticky Headers Implementation:** * Sticky headers can be implemented within the current custom component architecture * Browser limitations with `position: sticky` on standard table layout (`display: table-header-group`) prevent straightforward CSS solutions * Pajamas components could be expanded to support resizeable columns if migration is desired, but this would require additional work ### **Impact** * Improved usability for complex tabular data * Enhanced productivity when working with large tables * Reduced confusion and errors when interpreting data * Better context retention when scrolling through GLQL query results ### Designs Top rows would be sticky by default when user scrolls on any type of GitLab table. Example set on the prototype below using the table component within the Wiki: :art: [Figma \> Wiki table](https://www.figma.com/proto/FJDXeV6NVQGMgcJWCwwPpx/Wiki-Vision?page-id=125%3A36092&node-id=126-75639&viewport=16%2C594%2C0.11&t=6k5MuJDwdCJXZ6zb-1&scaling=scale-down&content-scaling=fixed&starting-point-node-id=126%3A75639) {width="900" height="508"} ## Rollout Plan For specifics on the rollout please reference the following Issue: https://gitlab.com/gitlab-org/gitlab/-/work_items/593078+ **Shadowing / overflow indicator:** Per @nickbrandt's [feedback](https://gitlab.com/gitlab-org/gitlab/-/work_items/585265#note_3195579073), tables need a shadow/scrim treatment to indicate truncated content on overflow (both horizontal and vertical). This is **not required for the internal rollout**, but **must be addressed before the external rollout** to customers.