Table

Properties

`<Table>`

	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`	`"left"` `"right"`	`"left"`	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`	`0`	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"` `"small"` `"medium"`	`"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>`

	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`	`false`	If set to `true`, the inherited header text will not wrap to new lines.
`verticalAlign`	`"top"` `"middle"` `"bottom"`	`undefined`	Vertical alignment of all cell content in the row.
`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.
`keepInDOM`	`boolean`	`false`	When `true`, keeps the accordion content in the DOM when closed. Defaults to `false`.
`highlight`	`boolean`	`false`	If set to `true`, all `<Td>` and `<Th>` cells in the row receive a highlighted background.
`children`	`React.ReactNode`	REQUIRED	The content of the component.

Table Header `<Th>`

	Type	Default value	Description
`variant`	`"emphasis"` `"subtle"`	`"emphasis"`	Defines the visual style of the table header. Use `subtle` for a lighter appearance with reduced font-weight, smaller font-size, and muted text color.
`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.
`highlight`	`boolean`	`false`	If set to `true`, the header cell and all `<Td>` cells in the same column receive a highlighted background. Also inherited from the parent `<Tr>` when it has `highlight`.
`children`	`React.ReactNode`	`undefined`	The content of the component.

Table Data `<Td>`

	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.
`verticalAlign`	`"top"` `"middle"` `"bottom"`	`undefined`	Vertical alignment of the cell content.
`highlight`	`boolean`	`false`	If set to `true`, the cell receives a highlighted background. Automatically set when the parent `<Tr>` has `highlight`, or when the corresponding `<Th>` in the same column has `highlight`.
`selected`	`boolean`	`undefined`	When `true`, the cell is styled as selected (highlighted background and selected icon/border). Requires `onClick` to take effect, since the selected styling targets the cell button. When provided (either `true` or `false`), the cell button is announced as a toggle button by screen readers via `aria-pressed`. Use `setSelected` from the `onClick` callback to toggle the state.
`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	sv-SE	da-DK
`Table.accordionToggleButtonSR`	Vis mer innhold	Show more content	Visa mer innehåll	Vis mere indhold
`Table.accordionMoreContentSR`	Mer innhold i neste rad	More content in the next row	Mer innehåll i nästa rad	Mere indhold i næste række
`Table.navigationButtonSR`	Naviger til mer innhold	Navigate to more content	Navigera till mer innehåll	Naviger til mere indhold