Tabular data component composing qds-column-header, qds-checkbox, qds-row-actions, qds-pagination, and qds-empty-state.
Basic data table with sortable columns and financial data.
Small (32px), medium (40px), and large (48px) row heights.
Zebra striping enabled; row borders remain.
Pre-sorted by market value ascending.
Sorted by weight descending, then symbol ascending.
Selectable with some rows pre-selected; header checkbox shows indeterminate.
All rows selected; header checkbox is checked.
Hover state uses --button-hover-bg. (Hover a row to see.)
Focused row gets a 4px --theme-accent-primary marker on its first cell. (Click a row, then use arrow keys.)
Header sticks to the top of the scroll container. The height constraint must be
on qds-data-table itself, not an outer wrapper — the table's own
[part="scroll"] region is what actually scrolls and owns the sticky
reference, via its internal flex layout.
Symbol column sticks to the left edge when scrolling horizontally.
The intersection of sticky header and sticky column needs a higher z-index.
Toolbar slot for filters, search, and bulk actions.
Client-side pagination at 10 rows per page.
Zero rows renders qds-empty-state with empty-title.
Loading state renders skeleton rows with aria-busy on the table.
In a narrow panel the pagination should remain usable.
Mixed magnitudes across number, currency, and percent columns — the important alignment regression test.
Table under dark theme via data-theme="dark".