Accessibility

Semantic Structure

Renders a native <table> with <thead>, <tbody> and real <th> header cells, so rows and columns arrive as structure a screen reader already understands. Give the table its name with ariaLabel: on a page with more than one table, that is what tells them apart. Sortable headers carry aria-sort, so the current direction is read out when the reader arrives at the header.

Keyboard Navigation

The table becomes a role="grid" with a roving tabindex as soon as it is interactive: selection, expandable rows or onRowClick. Without one of those it stays a plain table and the shortcuts below do nothing; the sortable headers and the pager are still tab stops.

Responsive Design

Below cardsBelow (default 48rem) the table renders one card per row. The step is measured on the table's own container, not on the window, and the table sets that container up itself: a table in a narrow sidebar switches while the window stays wide. It moves both ways, from 24rem to 56rem, so a three-column list can stay a grid in the sidebar and a wide report can become cards before its columns get cramped.

A card is operable from the keyboard: whatever opens it, the headline or the chevron beside it, is a real button. Column priority decides what a card shows (3 keeps a column out of it); the desktop grid always shows every column.