Table

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 1	Row 1	Row 1	Row 1
Row 2	Row 2	Row 2	Row 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 Header	Row 1 that spans	Row 1	Row 1
Row 1+2 Header	Row 1 that spans	Row 2	Row 2
Row 3 Header newline	Row 3		`noSpacing + align="right"`
Row 4 Header	Row 4	Row 4

Row scope headers only

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

A Table Caption
Header A	Row 1	Row 1
Header B	Row 2	Row 2

Fixed table

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

Medium and small sized

A Table Caption
Column		Column
Row 1	Row 1	Row 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
Column		Column
Row 1	Row 1	Row 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 A	Column B	Column C	Column D
Select row	Row 1	Label	Row 1

Select row	Row 2	Label	Row 2

Select row	Row 3	Label	Row 3

A Table Caption
Column A	Column B	Column C	Column D
Row 1	Row 1	Label	Row 1

Row 2	Row 2	Label	Row 2

Row 3	Row 3	Label	Row 3

Table with sticky header

A Table Caption
Header
Row 1 with p	`Row 1 with code`	Row 1 with span	Row 1
Column which spans over two columns		Row 2	Row 2
Row 3	Row 3	Row 3	Row 3
Footer			Sum

Table with a max height

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

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

Several tables in one container

Show how the import and syntax is structured.

import TableContainer from '@dnb/eufemia/components/table/TableContainer'
render(
  <TableContainer>
    <TableContainer.Head>
      <H2>Heading</H2>
    </TableContainer.Head>

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

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

Header

Text

Table One
I have a superscript ¹	Column 2	Column 3	Column 4
Row 1	Row 1	Row 1	Row 1
Row 2	Row 2	Row 2	Row 2

Table Two
Column 1	Column 2	Column 3	Column 4
Row 1	Row 1	Row 1	Row 1
Row 1	Row 2	Row 2	Row 2
Row 3	Row 2	Row 3	Row 3

Row Header Group	Row 1	Row 1
Row Header Group	Row 2	Row 2

Footer

With no (empty) head and foot content.

Column 1	Column 2	Column 3	Column 4
Row 1	Row 1	Row 1	Row 1
Row 2	Row 2	Row 2	Row 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

Example usage without and with classes

Header
Row 1	Row 1	Row 1
Row 2	Row 2	Row 2
Row 3	Row 3	Row 3

.dnb-table__th
.dnb-table__tr--even > .dnb-table__td
.dnb-table__tr--odd > .dnb-table__td

#Table

#Demos

#Basic table

#Complex table

#Row scope headers only

#Fixed table

#Medium and small sized

#Table with accordion rows

#Table with sticky header

#Table with a max height

#Several tables in one container