Table

Tables are used to organize and display data in an efficient way. They can be simple with few rows and columns, but they can also be rich with interactive components such as links, buttons, checkboxes and dropdown lists.

Read more about this component in the Aksel documentation.

The component names differ from @navikt/ds-react to align with the HTML standard.

Properties

Table

Property	Description	Default	Control
Properties
size	Changes padding. "medium" "small"	"medium"	Set value
sort	Sort state. TableSortState	-
zebraStripes	Zebra striped table. boolean	false	Set value
Snippets
children	Table contents.		-
Events
onsortchange	Callback for sort change.		-

Properties included from: HTMLTableAttributes

Thead

Property	Description	Default	Control
Snippets
children	Table header contents.		-

Properties included from: HTMLAttributes<HTMLTableSectionElement>

Tbody

Property	Description	Default	Control
Snippets
children	Table body contents.		-

Properties included from: HTMLAttributes<HTMLTableSectionElement>

Th

Property	Description	Default	Control
Properties
align	Cell alignment. "left" "center" "right"	-
sortable	Whether cell is sortable. boolean	false
sortKey	Key for sorting. string	""
Snippets
children	Cell contents.		-

Properties included from: HTMLThAttributes

Td

Property	Description	Default	Control
Properties
align	Cell alignment. "left" "center" "right"	-
Snippets
children	Data cell contents.		-

Properties included from: HTMLTdAttributes

Tr

Property	Description	Default	Control
Properties
selected	Highlight row as selected. boolean	false
shadeOnHover	Shade row on hover. boolean	true
Snippets
children	Row contents.		-

Properties included from: HTMLAttributes<HTMLTableRowElement>