Skip to content

Properties

<Table>

PropertyTypeDefault valueDescription
mode'accordion'
'navigation'
nullDefines 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".
borderbooleanfalseUse true to show borders between table data cells.
outlinebooleanfalseUse true to show an outline border around the table
stickyboolean
'css-position'
falseUse true to enable a sticky Table header. Or use 'css-position' to enable the CSS based scroll behavior.
stickyOffsetstring
number
falseDefines 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.
fixedbooleannullIf 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.
childrenReact.ReactNodeREQUIREDThe content of the component.
classNamestringundefinedCustom className on the component root
skeletonbooleanundefinedIf set to true, an overlaying skeleton with animation will be shown.
Spacestring
object
Spacing properties like top or bottom are supported.

Table Row <Tr>

PropertyTypeDefault valueDescription
variant'even'
'odd'
undefinedOverride the automatic variant of the current row. The next row one will continue with the opposite.
noWrapbooleantrueif set to true, the inherited header text will not wrap to new lines.
expandedbooleanfalseuse true to render the <Tr> initially as expanded.
disabledbooleanfalseuse true to disable the <Tr> to be accessible as an interactive element.
noAnimationbooleanfalseuse true to disable the expand/collapse animation.
childrenReact.ReactNodeREQUIREDThe content of the component.

Table Header <Th>

PropertyTypeDefault valueDescription
sortablebooleanfalseDefines the table header as sortable if set to true (ascending).
activebooleanfalseDefines the sortable column as the current active (ascending).
reversedbooleanfalseDefines the sortable column as in reversed order (descending).
noWrapbooleanfalseIf set to true, the header text will not wrap to new lines.
childrenReact.ReactNodeundefinedThe content of the component.

Table Data <Td>

PropertyTypeDefault valueDescription
noSpacingbooleanfalseIf set to true, no padding will be added.
spacing'horizontal'undefinedSet to horizontal for padding on left and right side.
childrenReact.ReactNodeundefinedThe content of the component.

Table Translations

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

Keynb-NOen-GB
Table.accordionToggleButtonSRVis mer innholdShow more content
Table.accordionMoreContentSRMer innhold i neste radMore content in the next row
Table.navigationButtonSRNaviger til mer innholdNavigate to more content