#Table

#Demos

#Basic table

NB: In this example, the sort buttons do react on your input. But will not change the table data.

#Complex table

You can force a row to overwrite the automated odd/even counting by providing e.g. variant="even" to a <Tr />. You can use this in combination with rowSpan.

NB: The table header in the first column needs to have scope="row"!

#Row scope headers only

This table has only scope="row" and scope="rowgroup" headers – without the default scope="col".

#Fixed table

#Medium and small sized

A small sized table is only for special circumstances, where a lot of data needs to be shown on the screen at the same time.

#Table with accordion

#Expand a single container

The second table uses both a border and an outline.

#Expand additional rows

It's also possible to use accordion to expand the table with more rows.

#Collapse all rows at once

You can collapse all expanded rows by sending a ref to the collapseAllHandleRef property and calling the .current() function on your ref.

const myTableCollapseAll = React.useRef<(() => void) | undefined>(undefined)

return (
  <button onClick={() => myTableCollapseAll.current?.()}>
    Close all rows
  </button>

  <Table mode="accordion" collapseAllHandleRef={myTableCollapseAll}>
    {/* ... your table code */}
  </Table>
)

#Table with navigation

#Table with sticky header

#Table with a max height

A sticky table header with sticky="css-position" and max-height on the Table.ScrollView.

#Several tables in one container

<TableContainer>
  <TableContainer.Head>
    <H2>Heading</H2>
  </TableContainer.Head>

  <TableContainer.Body>
    <Table>Content</Table>
    <Table>Content</Table>
  </TableContainer.Body>

  <TableContainer.Foot>
    <P>Footer</P>
  </TableContainer.Foot>
</TableContainer>

With no (empty) head and foot content.

#Table with long header text (wrapping)

#Table with pagination

#Table in Card

Using the subtle variant on the <Th>. The first <Tr> has the property variant="even" which will ensure a border below it to visually separate it from the body rows.

#Responsive table in a Card

NB: For tables with lots of content, it's best to avoid repeating the header for each row. This can be overwhelming for users who rely on screen readers.

Also, it is important that the <td> without a <th> has a aria-label={header.title} to let users with screen readers know where "these tools" belong to.

This example uses scope="row" with a table header (<th>) in each row.

#Example usage without and with classes