Table atomic components

The atomic components are for the cases that the standard table can't handle: when you need to control the table’s structure yourself, such as laying out columns on a fixed grid or positioning rows for virtualization. You assemble the table from its parts and keep full control over what each row and cell renders.

• If the standard table covers your needs, use it. It is the default for presenting data in rows and columns, and gives you selection, sorting, filtering, pagination, preferences and keyboard navigation with no assembly required.

• Use the atomic components only when the standard table can’t meet your needs. For example: a fixed grid column layout, or custom row positioning for virtualization or drag and drop.

The family has six parts, which you nest to build a table:

<TableRoot ariaLabel="Instances">
  <TableHead>
    <TableRow>
      <TableHeaderCell>Name</TableHeaderCell>
      <TableHeaderCell>State</TableHeaderCell>
    </TableRow>
  </TableHead>
  <TableBody>
    <TableRow>
      <TableBodyCell isRowHeader={true}>web-server-01</TableBodyCell>
      <TableBodyCell>Running</TableBodyCell>
    </TableRow>
  </TableBody>
</TableRoot>

Find out more about the individual parts:

• Table root

  • Table head

    • Table row

      • Table header cell

  • Table body

    • Table row

      • Table body cell

To see the parts working together, with sorting, selection, pagination, grid layout and virtualization, see the examples.