Data Table

Data Density & Readability

Use consistent padding within cells (px-4 py-2) and align numeric values to the right. Keep column count manageable (5-8 visible columns) and use column visibility toggles for optional fields. Alternate row styling with data-[state=selected]:bg-muted helps users track across wide tables.

Sorting & Filtering Patterns

Place filter inputs above the table, aligned with the column they control. Use variant="ghost" buttons in sortable column headers so they appear interactive without visual clutter. Show clear sort direction indicators (up/down arrows) so users always know the current sort state.

Responsive Behavior

Wrap the table in a horizontally scrollable container on small screens. Hide less-important columns by default on mobile using column visibility state. Consider switching to a stacked card layout below md breakpoint for complex tables. Pagination controls should remain accessible at all viewport sizes.

Empty & Loading States

Always provide a clear empty state message when no rows match the current filter (e.g., "No results found"). Use colSpan to span the full table width for the empty message. Show Skeleton rows during initial data loading to communicate layout structure.

Keyboard Navigation

• Tab -- Move focus between interactive elements (filters, sort buttons, checkboxes, pagination)
• Enter or Space -- Activate sort buttons, toggle checkboxes, or navigate pages
• Arrow Up / Arrow Down -- Navigate within dropdown menus (column visibility)
• Escape -- Close open dropdown menus or popovers

Screen Reader Support

• The native <table> element provides implicit grid semantics for screen readers
• Add aria-label to all selection checkboxes (e.g., "Select row", "Select all")
• Use aria-sort="ascending" or "descending" on sortable column headers
• Announce filter results and page changes with aria-live="polite" regions

Focus Management

Sort buttons and checkboxes display a visible focus ring using focus-visible:ring-[3px]. After toggling sort order, focus remains on the column header button. When navigating pages, focus should return to the first interactive element in the table or the pagination controls.

Row Selection Patterns

The "Select all" checkbox uses an indeterminate state when only some rows are selected. Each row checkbox includes a descriptive aria-label. Selected row count is displayed as live text so screen readers announce changes. Selection columns use enableSorting: false and enableHiding: false to keep them always visible and non-sortable.

ARIA Attributes

{/* Table with accessible caption */}
<Table>
  <caption className="sr-only">Payment transactions</caption>
  <TableHeader>...</TableHeader>
  <TableBody>...</TableBody>
</Table>

{/* Row selection with labeled checkboxes */}
<Checkbox
  checked={row.getIsSelected()}
  onCheckedChange={(value) => row.toggleSelected(!!value)}
  aria-label={`Select row ${row.index + 1}`}
/>

{/* Sortable header with aria-sort */}
<TableHead aria-sort={
  column.getIsSorted() === "asc" ? "ascending"
    : column.getIsSorted() === "desc" ? "descending"
    : "none"
}>
  <Button variant="ghost" onClick={() => column.toggleSorting()}>
    Email <ArrowUpDown className="ml-2 h-4 w-4" />
  </Button>
</TableHead>

{/* Pagination with live region */}
<div aria-live="polite" className="text-sm text-muted-foreground">
  Page {table.getState().pagination.pageIndex + 1} of{" "}
  {table.getPageCount()}
</div>