Table

GradeTested

UsageCopy Anchor Link

import {
  Table,
  TableBody,
  TableCaption,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@cadence-clinical/ui";

<Table>
  <TableCaption>Appointments this week</TableCaption>
  <TableHeader>
    <TableRow>
      <TableHead>Clinic</TableHead>
      <TableHead className="text-end">Minutes</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow>
      <TableCell>Review clinic</TableCell>
      <TableCell className="text-end">30</TableCell>
    </TableRow>
  </TableBody>
</Table>;

Table is the native table elements with Cadence's styles, and each part accepts its element's props. It follows the shadcn Table and keeps its part names. It shows rows you give it. Sorting, filtering, selection and paging belong to the planned data table, which is built on this.

Name the table and its headingsCopy Anchor Link

• Give the table a TableCaption, or an aria-label or aria-labelledby on Table. A screen reader reads the name before the table.
• TableHead heads a column: it has scope="col" unless you set it. When the first cell of a row names that row, make it a TableHead with scope="row".
• Align a column of numbers to the end with className="text-end" on its heading and its cells. Digits are all one width, so the numbers line up.

Wrapping and wide tablesCopy Anchor Link

A cell wraps between words, so a narrow table grows taller and not wider. A word is never broken in the middle, because a name split across lines can be misread. A value with nowhere to break is kept whole.

A table that is still wider than its place scrolls sideways inside its own box, and the page does not. If you wrap the table in your own element, such as one that draws a border around it, give that element min-w-0: inside a grid or a flex layout an element grows to its content's widest possible width unless it is allowed to shrink, and the table would push the page wider instead of scrolling. That box takes focus, so a keyboard can scroll it, and it shows the focus ring when it does. When the table has an aria-label or aria-labelledby, the box is a region with the same name, which a screen reader can move to.

A chosen rowCopy Anchor Link

Set aria-selected on a TableRow to fill it. The fill is colour, so give a chosen row a second sign, such as a ticked Checkbox.

What Cadence changesCopy Anchor Link

• Cells wrap. shadcn sets every heading and cell to one line, which makes any sentence a sideways scroll.
• The scrolling box takes focus and is named. shadcn's scrolls and cannot be reached from the keyboard.
• A row is about as high as a control, and padding and text follow the density.
• Digits are all one width.
• A heading cell has a scope.
• A row's fill does not fade in. A row is pointed at all day.

PropsCopy Anchor Link