Skip to content

Demos

Basic table

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

A Table Caption
Column
Help Button
Row 1Row 1Row 1Row 1
Row 2Row 2Row 2Row 2

Row 3 with paragraph

Row 3 with code

Row 3 with medium paragraph

Row 3 with medium text

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"!

A Table Caption
Column 2
newline
Column 3 that spans
Row 1+2 HeaderRow 1 that spansRow 1Row 1
Row 2Row 2
Row 3 Header
newline
Row 3noSpacing + align="right"
Row 4 HeaderRow 4Row 4

Row scope headers only

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

A Table Caption
Header ARow 1Row 1
Header BRow 2Row 2

Fixed table

A Table Caption
Column 1Column 2Column 3Column 4Column 5Column 6Column 7Column 8
Row 1Row 1Row 1Row 1Row 1Row 1Row 1Row 1
Row 2Row 2Row 2Row 2Row 2Row 2Row 2Row 2
Row 3Row 3Row 3Row 3Row 3Row 3Row 3Row 3
Row 4Row 4Row 4Row 4Row 4Row 4Row 4Row 4

Medium and small sized

A Table Caption
ColumnColumn
Row 1Row 1Row 1

Row 2 with paragraph

Row 2 with medium paragraph

Row 2 with medium text

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.

A Table Caption
ColumnColumn
Row 1Row 1Row 1

Row 2 with paragraph

Row 2 with medium paragraph

Row 2 with medium text

Table with accordion

Expand a single container

The second table uses both a border and an outline.

A Table Caption
Column AColumn BColumn CColumn D
Row 1Row 1
Row 2Row 2
Row 3Row 3
A Table Caption
Column AColumn BColumn CColumn D
Row 1Row 1Row 1
Row 2Row 2Row 2
Row 3Row 3Row 3

Expand additional rows

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

Column AColumn BColumn CColumn D
Row 1Row 1Row 1Row 1
Row 2Row 2Row 2Row 2
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>()
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

A Table Caption
Header

Row 1 with p

Row 1 with codeRow 1 with spanRow 1
Column which spans over two columnsRow 2Row 2
Row 3Row 3Row 3Row 3
FooterSum

Table with a max height

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

Column 1Column 2Column 3Column 4
Row 1Row 1Row 1Row 1
Row 2Row 2Row 2Row 2
Row 3Row 3Row 3Row 3
Row 4Row 4Row 4Row 4
Row 5Row 5Row 5Row 5
Row 6Row 6Row 6Row 6
Row 7Row 7Row 7Row 7
Row 8Row 8Row 8Row 8
Row 9Row 9Row 9Row 9
Row 10Row 10Row 10Row 10
Row 11Row 11Row 11Row 11
Row 12Row 12Row 12Row 12

Several tables in one container

Show how the import and syntax is structured.

Code Editor
<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>

Header

Text

Table One
I have a superscript 1Column 2Column 3Column 4
Row 1Row 1Row 1Row 1
Row 2Row 2Row 2Row 2
Table Two
Column 1Column 2Column 3Column 4
Row 1Row 1Row 1Row 1
Row 2Row 2Row 2
Row 3Row 3Row 3
Row Header GroupRow 1Row 1
Row 2Row 2

Footer

With no (empty) head and foot content.

Column 1Column 2Column 3Column 4
Row 1Row 1Row 1Row 1
Row 2Row 2Row 2Row 2

Table with long header text (wrapping)

A Table Caption
Static long header senectus ornare convallis ut at erat imperdiet commodo

col span of 4

Table with pagination

Side 1

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.

Card title
TittelLorem ipsum
BeskrivelseLorem ipsum
StatusIkke påbegynt
Frist17.04.2025
TittelLorem ipsum
BeskrivelseLorem ipsum
StatusIkke påbegynt
Frist17.04.2025

Example usage without and with classes

Header
Row 1Row 1Row 1
Row 2Row 2Row 2
Row 3Row 3Row 3
.dnb-table__th
.dnb-table__tr--even > .dnb-table__td
.dnb-table__tr--odd > .dnb-table__td