Table

Properties

`<Table>`

Property	Type	Default value	Description
`mode`	`'accordion'` `'navigation'`	`null`	Defines how the Table should look. Use `accordion` for an accordion-like table. Use `navigation` for a navigation table.
`accordionChevronPlacement`	`'start'` `'end'`	`'start'`	Defines where the chevron will be placed, should only be used together with mode="accordion".
`border`	`boolean`	`false`	Use `true` to show borders between table data cells.
`outline`	`boolean`	`false`	Use `true` to show an outline border around the table
`sticky`	`boolean` `'css-position'`	`false`	Use `true` to enable a sticky Table header. Or use `'css-position'` to enable the CSS based scroll behavior.
`stickyOffset`	`string` `number`	`false`	Defines the offset (top) in `rem` from where the header should start to stick. You may define your app header height here, if you have a sticky header on your page.
`size`	`'large'` `'medium'` `'small'`	`'large'`	Spacing size inside the table header and data.
`fixed`	`boolean`	`null`	If set to `true`, the table will behave with a fixed table layout, using: `table-layout: fixed;`. Use e.g. CSS `width: 40%` on a table column to define the width.
`children`	`React.ReactNode`	REQUIRED	The content of the component.
`className`	`string`	`undefined`	Custom className on the component root
`skeleton`	`boolean`	`undefined`	If set to `true`, an overlaying skeleton with animation will be shown.
`Space`	`string` `object`		Spacing properties like `top` or `bottom` are supported.

Table Row `<Tr>`

Property	Type	Default value	Description
`variant`	`'even'` `'odd'`	`undefined`	Override the automatic variant of the current row. The next row one will continue with the opposite.
`noWrap`	`boolean`	`true`	if set to `true`, the inherited header text will not wrap to new lines.
`expanded`	`boolean`	`false`	use `true` to render the `<Tr>` initially as expanded.
`disabled`	`boolean`	`false`	use `true` to disable the `<Tr>` to be accessible as an interactive element.
`noAnimation`	`boolean`	`false`	use `true` to disable the expand/collapse animation.
`children`	`React.ReactNode`	REQUIRED	The content of the component.

Table Header `<Th>`

Property	Type	Default value	Description
`sortable`	`boolean`	`false`	Defines the table header as sortable if set to `true` (ascending).
`active`	`boolean`	`false`	Defines the sortable column as the current active (ascending).
`reversed`	`boolean`	`false`	Defines the sortable column as in reversed order (descending).
`noWrap`	`boolean`	`false`	If set to `true`, the header text will not wrap to new lines.
`children`	`React.ReactNode`	`undefined`	The content of the component.

Table Data `<Td>`

Property	Type	Default value	Description
`noSpacing`	`boolean`	`false`	If set to `true`, no padding will be added.
`spacing`	`'horizontal'`	`undefined`	Set to `horizontal` for padding on left and right side.
`children`	`React.ReactNode`	`undefined`	The content of the component.

Table Translations

More info about translations can be found in the general localization and Eufemia Forms localization docs.

Key	nb-NO	en-GB	en-US
`Table.accordionToggleButtonSR`	Vis mer innhold	Show more content	Show more content
`Table.accordionMoreContentSR`	Mer innhold i neste rad	More content in the next row	More content in the next row
`Table.navigationButtonSR`	Naviger til mer innhold	Navigate to more content	Navigate to more content