Table

General

Table from @prepared911/ui/table renders a semantic HTML table. The component gives you correct <table>, <thead>, <tbody>, <tr>, <th>, and <td> elements; your job is to name the table, provide column-header scope, and keep selection and sorting announced when they're interactive. For richer data grids with column resizing, sticky headers, and virtualization, see DataTable.

What the component handles

Semantic table markup. Screen readers surface row and column counts and allow cell-by-cell navigation.
Header cells. <th> elements render with scope="col" by default when you use the header APIs correctly.

What you must provide

Accessible name. Caption the table with <caption> or associate it via aria-labelledby pointing at a visible heading. Without a name, rotor navigation surfaces "table, N rows, N columns" with no context.
Header scope. When a row or column header applies to a subset, annotate with scope="row" / scope="col" / scope="rowgroup" / scope="colgroup" to clarify what the header governs.
Sort state. If columns are sortable, expose the current sort via aria-sort (ascending, descending, none) on the header <th>. Announce changes in a polite live region when sort is applied programmatically.
Selection. If rows are selectable, each checkbox has an accessible name ("Select incident ABC-123") and the selection count announces in a polite live region on change.

Sort state

Selection state

Expose per-row selection with a named checkbox and announce totals after changes:

Deep dives

Semantic HTML: structure, column headers, and row headers.
Screen Reader Support: expected announcements when navigating cells.
Keyboard Navigation: cell navigation, focus indicators, and header association.
Complex Cell Content: text, nested components, and interactive elements inside cells.
Alignment Accessibility: alignment, empty states, responsive behavior, and the best-practices summary.

Known caveats

Merged cells. Rowspans and colspans should use headers attributes when they span multiple groupings. Avoid unless necessary.
Large tables. For thousands of rows, use DataTable, which windows its rows. VirtualizedList keeps every row mounted and skips paint; it is a list, not a table.

Table / API and Development

Accessibility / Semantic HTML

On this page

What the component handles

What you must provide

Table

General

What the component handles

Semantic table markup. Screen readers surface row and column counts and allow cell-by-cell navigation.
Header cells. <th> elements render with scope="col" by default when you use the header APIs correctly.

What you must provide

Accessible name. Caption the table with <caption> or associate it via aria-labelledby pointing at a visible heading. Without a name, rotor navigation surfaces "table, N rows, N columns" with no context.
Header scope. When a row or column header applies to a subset, annotate with scope="row" / scope="col" / scope="rowgroup" / scope="colgroup" to clarify what the header governs.
Sort state. If columns are sortable, expose the current sort via aria-sort (ascending, descending, none) on the header <th>. Announce changes in a polite live region when sort is applied programmatically.
Selection. If rows are selectable, each checkbox has an accessible name ("Select incident ABC-123") and the selection count announces in a polite live region on change.

Sort state

Selection state

Expose per-row selection with a named checkbox and announce totals after changes:

Deep dives

Semantic HTML: structure, column headers, and row headers.
Screen Reader Support: expected announcements when navigating cells.
Keyboard Navigation: cell navigation, focus indicators, and header association.
Complex Cell Content: text, nested components, and interactive elements inside cells.
Alignment Accessibility: alignment, empty states, responsive behavior, and the best-practices summary.

Known caveats

Merged cells. Rowspans and colspans should use headers attributes when they span multiple groupings. Avoid unless necessary.
Large tables. For thousands of rows, use DataTable, which windows its rows. VirtualizedList keeps every row mounted and skips paint; it is a list, not a table.

Table / API and Development

Accessibility / Semantic HTML

On this page

What the component handles

What you must provide