#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 clickable rows (navigation mode)

Use mode="navigation" on the <Table> and onClick on individual <Tr> rows to make them clickable. A chevron icon is rendered in an additional cell at the end of each clickable row for screen reader and keyboard accessibility. Rows respond to click as well as keyboard interaction with Space and Enter. Hover and focus indicators are sufficient to indicate interactivity per WCAG 1.4.1.

#Table with clickable cells

Use onClick on individual <Td> cells to make them clickable. A native <button> is rendered inside the cell for screen reader and keyboard accessibility. The chevron icon is included by default, but is only shown on hover, active, and keyboard focus. Use icon={false} to hide it entirely, or pass a custom icon. Hover and focus indicators are sufficient to indicate interactivity per WCAG 1.4.1.

When the selected prop is provided (either true or false) together with onClick, the cell button is announced as a toggle button by screen readers, conveying its pressed state. The selected prop requires onClick to take effect, since the selected styling targets the cell button.

#Table with keyboard navigation

Use the useTableKeyboardNavigation hook to navigate between cells with arrow keys. Focusable elements inside cells (inputs, buttons) receive focus automatically.

import Table, {
  useTableKeyboardNavigation,
} from '@dnb/eufemia/components/Table'

const KeyboardNavigationTable = () => {
  const navRef = useTableKeyboardNavigation()
  return (
    <Table border outline ref={navRef}>
      <caption className="dnb-sr-only">Keyboard navigable table</caption>

      <thead>
        <tr>
          <Th>Name</Th>
          <Th>Email</Th>
          <Th>Action</Th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <Td>
            <Field.String label="Name" labelSrOnly value="Ola" />
          </Td>
          <Td>
            <Field.Email labelSrOnly value="ola@example.no" />
          </Td>
          <Td verticalAlign="middle">
            <Button
              variant="tertiary"
              icon={trashIcon}
              tooltip="Delete row"
            />
          </Td>
        </tr>
        <tr>
          <Td>
            <Field.String
              label="Name"
              labelSrOnly
              value="Kari"
              multiline
            />
          </Td>
          <Td>
            <Field.Email labelSrOnly value="kari@example.no" multiline />
          </Td>
          <Td verticalAlign="middle">
            <Button
              variant="tertiary"
              icon={trashIcon}
              tooltip="Delete row"
            />
          </Td>
        </tr>
        <tr>
          <Td>
            <Field.Number
              label="Quantity"
              labelSrOnly
              showStepControls
              width="small"
              value={1}
            />
          </Td>
          <Td>
            <Field.Number
              label="Quantity"
              labelSrOnly
              showStepControls
              width="small"
              value={2}
            />
          </Td>
          <Td verticalAlign="middle">
            <Button
              variant="tertiary"
              icon={trashIcon}
              tooltip="Delete row"
            />
          </Td>
        </tr>
        <tr>
          <Td>Kari</Td>
          <Td>kari@example.no</Td>
          <Td>
            <Button
              variant="tertiary"
              icon={trashIcon}
              tooltip="Delete row"
            />
          </Td>
        </tr>
      </tbody>
    </Table>
  )
}
render(<KeyboardNavigationTable />)

#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.

#Column highlight

Use highlight on <Th>, <Tr>, or <Td> to apply a subtle background and border. When set on a <Tr>, all cells in that row are highlighted. You can also set it on individual <Td> cells.

To adjust the border colors accordingly, use the useTableHighlight hook and pass the returned ref to <Table>.

import Table, { useTableHighlight } from '@dnb/eufemia/components/Table'

const highlightRef = useTableHighlight()
render(<Table ref={highlightRef}>...</Table>)

#Example usage without and with classes