Clinia UI

Data Table

A table with filtering, sorting, row selection and row actions, composed from Table, Checkbox, Input Group and Dropdown Menu.

shadcn docs →

When to use

  • A list users filter, sort, select from and act on: sources, API keys, records.
  • Bulk actions on several rows at once, such as archiving sources.

When not to use

  • Read-only data with no actions: use Table.
  • A short list of rich items: use Item.
  • Nothing to show yet: use Empty in place of the whole table, with the next action.

Install

npx shadcn@latest add @clinia/table @clinia/checkbox @clinia/input-group @clinia/dropdown-menu @clinia/badge @clinia/button
StatusActions
Esther HowardPending
Floyd MilesInactive
Jane CooperActive
Ronald RichardsActive
1 of 4 selected

Clinia rules

  • Set interactive on every row: users select and act on them, so each row takes the hover tint.
  • Row actions live in one Dropdown Menu at the end of the row, behind a ghost icon-sm Button. Don't line up several buttons in every row.
  • Destructive actions sit last in the menu, after a separator, with variant="destructive".
  • A filter that matches nothing keeps the table and says so in one row: No patients match “cardio”.
  • Status columns use Badge with the status in words, never a coloured dot alone.
  • Show how many rows are selected (1 of 4 selected), next to the bulk actions when the table has them.

Do and don't

Lab resultsSynced
ImagingSynced
Do put row actions in one menu at the end of the row.
Lab results
Imaging
Don't line up several buttons in every row.
No patients match “cardio”.
Do say which filter matched nothing.
NameStatus
Don't leave the table blank when a filter matches nothing.

Accessibility

Built in

  • Every row checkbox and action button carries an aria-label naming the row, since the visible cell text is not its label.
  • A selected row is tinted bg-accent/15; the checked checkbox is the state cue that clears 3:1.

Your responsibility

  • Set aria-sort (ascending or descending) on the TableHead of the sorted column, and put the sort control in a real Button.
  • Set indeterminate on the select-all Checkbox when only some rows are selected.
  • Announce the result count when a filter changes the rows, for example with a role="status" region: 3 patients.

How to test

  1. Tab to the filter and type: the rows update, and a screen reader hears the new count if you added a status region.
  2. Tab to a row checkbox and press Space: it toggles, the row tints and the selected count updates. A screen reader announces Select Jane Cooper, checkbox, checked.
  3. Tab to a row's actions button: it's announced with the row name. Press Enter: the menu opens. Arrow keys move, Escape closes it and focus returns to the button.
  4. Press the sort button in the header: the order flips, and a screen reader reads the column as sorted.

Related