---
title: 'Table'
description: 'Enhanced HTML Table element.'
version: 11.3.0
generatedAt: 2026-05-19T08:44:42.024Z
checksum: bb67ff72e66e59cb08044768ac0c52123df6867883885602d9f81ecf18c74ff1
---
# Table
## Import
```tsx
import { Table } from '@dnb/eufemia'
// Or with sub-components and hooks:
import Table, {
Th,
Td,
Tr,
useTableKeyboardNavigation,
} from '@dnb/eufemia/components/Table'
```
## Description
The Table component is an all-inclusive and accessible table based on correct HTML semantics.
## Relevant links
- [Figma](https://www.figma.com/design/cdtwQD8IJ7pTeE45U148r1/%F0%9F%92%BB-Eufemia---Web?node-id=4243-1499)
- [Source code](https://github.com/dnbexperience/eufemia/tree/main/packages/dnb-eufemia/src/components/table)
- [Docs code](https://github.com/dnbexperience/eufemia/tree/main/packages/dnb-design-system-portal/src/docs/uilib/components/table)
Please use the properties instead of overwriting the styles. If you miss a feature, get in [touch with us](/contribute/contact/).
**NB:** If you have more than three (3) columns, please consider using the `border` property to enhance accessibility.
### Accessibility
Tables both serve as a way of navigation for screen readers and other assistive technologies, and help to give data an ordered structure.
Use the documentation from [MDN – The Table element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table) for more information on making semantic correct tables, including `scope`, `align`, `colSpan` and `rowSpan`.
Here is a list of things you may follow along in order to ensure your coded tables still are accessible:
- Keep a semantic correct structure.
- Let tables align the column width, when possible.
- Do not use CSS `display` property on any table element.
- Do not overwrite styles in general, but rather get in touch with DNB UX.
- Never put a table inside a table.
- Text inside tables do not need to be wrapped inside a paragraph as well. They give screen readers no additional useful information.
### Table header components
- `` to be used for additional sorting functionality.
- `` to be used for help related content.
### Alignment
Use e.g. `align="right"` on a `
`, `
` or `
` to align a table header or a table data element.
### Fixed layout
You may consider using `table-layout: fixed;`. You can use the modifier property `fixed` for doing so and combine it with CSS e.g. `width: 40%` on specific table headers.
### Scrollable
Depending on your situation, you may want to wrap your Table within `Table.ScrollView`:
```jsx
import { Table } from '@dnb/eufemia'
render(
)
```
### Sticky header
You have two options (both have their downsides):
1. use `sticky={true}`. It works even when using a `Table.ScrollView` or when `overflow: hidden;` is used on any parent elements. It also works inside a [Drawer](/uilib/components/drawer). The downside is that it uses JavaScript and the browser may drop some frames, which results in potential flickering during scrolling.
2. use `sticky="css-position"` for using the CSS `position: sticky;` method. It is super smooth. But then you cannot use a `overflow: hidden;` or `overflow: auto;` on any parent elements. This is a known issue happening on every modern browser.
Method no. 2 should be used when a `max-height` is set to the wrapping `Table.ScrollView` e.g.:
```jsx
```
Have a [look at this example](/uilib/components/table/demos/#table-with-a-max-height).
### Sortable table
Optionally, make use of the following React Hook to handle the `Th.SortButton` directions.
It can be used as a "controller" for your own sorting logic of your data.
By default, it will cycle through three stages `['asc', 'desc', 'off']`.
How to use the useHandleSortState React Hook.
```jsx
import useHandleSortState from '@dnb/eufemia/components/table/useHandleSortState'
// You can also provide a default that will be used as the fallback e.g.
const defaultOptions = { direction: 'asc', modes: ['asc', 'desc', 'off'] }
export const YourComponent = () => {
const { sortState, sortHandler, activeSortName } = useHandleSortState(
{
// Define your column names with options (optional)
column1: { active: true }, //
column2: { direction: 'desc', modes: ['asc', 'desc'] }, // overwrite the defaultOptions
column3: { modes: ['asc', 'off'] }, // will only allow one direction
column4: {}, // etc.
},
defaultOptions
)
// Use these properties for your custom sorting logic
console.log(sortState.column1.direction) // returns either "asc", "desc" or "off"
console.log(activeSortName) // returns the current active one: "column1" (returns null when nothing is active)
// Handle your logic
useEffect(() => {
switch (sortState.column1.direction) {
default:
case 'asc':
setYourLocalState(mockData.sort(compareFunctionAsc))
break
case 'desc':
setYourLocalState(mockData.sort(compareFunctionsDesc))
break
case 'off':
setYourLocalState(mockData)
break
}
}, [sortState.column1.direction])
return (
)
}
```
### Keyboard navigation
Use the `useTableKeyboardNavigation` hook to enable arrow-key navigation between table cells. When a cell contains a focusable element (such as an input, button, or link), that element receives focus. Otherwise, the cell itself is focused.
```jsx
import Table, {
useTableKeyboardNavigation,
} from '@dnb/eufemia/components/Table'
function MyTable() {
const navRef = useTableKeyboardNavigation()
return (
)
}
```
The hook accepts an optional options object:
| Option | Type | Default | Description |
| --------- | --------- | ------- | ------------------------------------- |
| `enabled` | `boolean` | `true` | Whether keyboard navigation is active |
## Demos
### Basic table
**NB:** In this example, the sort buttons do react on your input. But will not change the table data.
```tsx
const BasicTable = () => {
const {
sortState,
sortHandler
} = useHandleSortState({
column1: {
direction: 'asc',
active: true
},
column2: {
direction: 'desc',
modes: ['asc', 'desc']
}
});
// Handle your "column1" logic
useEffect(() => {
switch (sortState.column1.direction) {
case 'asc':
break;
case 'desc':
break;
default:
case 'off':
break;
}
}, [sortState.column1.direction]);
return
A Table Caption
Column
Help Button
Help Content
Row 1
Row 1
Row 1
Row 1
Row 2
Row 2
Row 2
Row 2
Row 3 with paragraph
Row 3 with code
Row 3 with medium paragraph
Row 3 with medium text
;
};
render();
```
### Complex table
You can force a row to overwrite the automated odd/even counting by providing e.g. `variant="even"` to a `
`. You can use this in combination with `rowSpan`.
**NB:** The table header in the first column needs to have `scope="row"`!
```tsx
render(
A Table Caption
Column 2
newline
Column 3 that spans
Row 1+2 Header
Row 1 that spans
Row 1
Row 1
Row 2
Row 2
Row 3 Header
newline
Row 3
noSpacing + align="right"
Row 4 Header
Row 4
Row 4
)
```
### Row scope headers only
This table has only `scope="row"` and `scope="rowgroup"` headers – without the default `scope="col"`.
```tsx
render(
)
```
A `small` sized table is only for special circumstances, where a lot of data needs to be shown on the screen at the same time.
```tsx
render(
A Table Caption
Column
Column
Row 1
Row 1
Row 1
Row 2 with paragraph
Row 2 with medium paragraph
Row 2 with medium text
)
```
### Table with accordion
#### Expand a single container
The second table uses both a `border` and an `outline`.
```tsx
const AccordionTable = ({
id,
showCheckbox = false,
...props
}) => {
const TdCheckbox = () => {
return ;
};
const TdInput = () => {
return ;
};
const Content = ({
shareId
}) => {
const ref = useRef(undefined);
const {
copy,
copyTooltip
} = useCopyWithNotice();
const shareHandler = () => {
const url = new URL(location.href);
url.hash = '#' + shareId;
copy(url.toString());
};
return <>
Favorittfarge
Grønn
Favorittmat
Taco
{copyTooltip(ref.current)}
;
};
const Row = ({
nr
}) => {
const shareId = id + '-' + nr;
return
{showCheckbox ? : 'Row ' + nr}
Row {nr}
Row {nr}
;
};
return
A Table Caption
Column A
Column B
Column C
Column D
;
};
render(<>
);
```
#### Expand additional rows
It's also possible to use accordion to expand the table with more rows.
```tsx
const firstRowContent = [{
label: 'Expanded 1.1'
}, {
label: 'Expanded 1.2 with a lot of text'
}];
render(
Column A
Column B
Column C
Column D
Row 1
Row 1
Row 1
Row 1
{firstRowContent.map(({
label
}) =>
{label}
{label}
{label}
{label}
)}
Row 2
Row 2
Row 2
Row 2
Expanded 2.1 with a lot of text
Expanded 2.1
Expanded 2.1
Expanded 2.1
Expanded 2.2 with a lot of text
Expanded 2.2
Expanded 2.2
Expanded 2.2
Expanded 2.3 with a lot of text
Expanded 2.3
Expanded 2.3
Expanded 2.3
);
```
##### Collapse all rows at once
You can collapse all expanded rows by sending a ref to the `collapseAllHandleRef` property and calling the `.current()` function on your ref.
```jsx
const myTableCollapseAll = React.useRef<(() => void) | undefined>(undefined)
return (
{/* ... your table code */}
)
```
### Table with clickable rows (navigation mode)
Use `mode="navigation"` on the `
` and `onClick` on individual `
` rows to make them clickable. A chevron icon is rendered in an additional cell at the end of each clickable row for screen reader and keyboard accessibility. Rows respond to click as well as keyboard interaction with Space and Enter. Hover and focus indicators are sufficient to indicate interactivity per WCAG 1.4.1.
```tsx
const NavigationTable = ({
id,
showCheckbox = false,
...props
}) => {
const TdCheckbox = () => {
return ;
};
const TdInput = () => {
return ;
};
const Row = ({
nr
}) => {
const shareId = id + '-' + nr;
const handleClick = useCallback((_event, {
trElement
}) => {
console.log('Clicked row', trElement.dataset.rowId);
}, []);
return
{showCheckbox ? : 'Row ' + nr}
Row {nr}
Row {nr}
;
};
return
A Table Caption
Column A
Column B
Column C
Column D
;
};
render(<>
);
```
### Table with clickable cells
Use `onClick` on individual `