Data Table

Accessibility

• Real table semantics, with aria-sort on the sorted header and aria-selected on rows.
• The bulk bar is a labelled toolbar.
• Mobile cards repeat the same checkboxes with the same names.
• Status is a label and a mark, never color alone.

Motion

• Sorting toggles asc, desc, off. Rows slide 300 ms by transform and jump past 200 rows.
• The header crossfades into bulk actions with a 4 px slide over 200 ms.
• Chips scale from 0.9 on a spring.
• Skeleton rows shimmer on a 1,200 ms loop that pauses offscreen.
• With reduced motion, rows reorder at once and the skeleton is static.

Responsive behavior

• Only the current page renders, so long lists stay fast.
• Under 520 px rows become stacked cards by container width.
• Search folds into an icon button and actions become round icon buttons.

Performance

• Only the current page renders, so long lists stay fast.
• Matching and sorting are memoized on their inputs.

• Import DataTable, DataTableHeader and TableToolbar. Required: title, columns, rows, getId.
• A column's value drives sort, search and filters, and render draws the cell. card places it on Mobile.
• Sorting and filtering run on the client, on the rows you pass. Server paging needs the header and Table pieces instead.
• actions run on selected ids through onSelect, and action is the one Primary. In the demo neither is connected.