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.

Name	Phone	Expiry
Jakobsen, Markus	555 555 5555	28.04.2021
Halvorsen, Mari	555 432 5555	29.01.2022
Christiansen, Mathias	555 123 5555	04.06.2021
Fredriksen, Leah	555 345 1234	31.08.2021
Evensen, Jonas	555 123 4321	17.07.2021

Properties

Table

Property	Description	Default	Control
Properties
size	Changes padding. `"medium"` `"small"`	`"medium"`
sort	Sort state. `TableSortState`	-
zebraStripes	Zebra striped table. `boolean`	`false`
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>

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>

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

ExpandableRow

Create an expandable row in a table. content will be shown when the row is expanded.

Property	Description	Default	Control
Properties
content required	Content of the expanded row `Snippet` `string`	-
colSpan	The width of the expanded row's internal cell `number`	`999`
contentGutter	Optional left, right-gutter for content `"left"` `"right"` `"none"`	-
expandOnRowClick	Makes the whole row clickable `boolean`	`false`
expansionDisabled	Disable expansion. shadeOnHover will not be visible. `boolean`	`false`
open bindable	Opens component if 'true', closes if 'false' Using this prop removes automatic control of open-state `boolean`	`false`
selected	Highlight row as selected. `boolean`	-
shadeOnHover	Shade row on hover. `boolean`	-
showLessText	Description for the toggle button when the row is expanded `string`	-
showMoreText	Description for the toggle button when the row is collapsed `string`	-
togglePlacement	Placement of toggle button `"left"` `"right"`	`"left"`
Snippets
children	Row contents.		-
content	Content of the expanded row		-
Events
onopenchange	Change handler for open		-