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 rows

The second example 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

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>{'hei'}</Table>
    <Table>{'hei'}</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

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