Table

<ui5-table> | Since 2.0.0

info

This Table web component is available since 2.0 and has been newly implemented to provide better screen reader and keyboard handling support. Currently, it's considered experimental as its API is subject to change. This Table replaces the previous Table web component, that has been part of @ui5/webcomponents version 1.x. For compatibility reasons, we moved the previous Table implementation to the @ui5/webcomponents-compat package and will be maintained until the new Table is experimental. Keep in mind that you can use either the compat/Table, or the main/Table - you can't use them both as they both define the ui5-table tag name.

The ui5-table component provides a set of sophisticated features for displaying and dealing with vast amounts of data in a responsive manner. To render the ui5-table, you need to define the columns and rows. You can use the provided ui5-table-header-row and ui5-table-row components for this purpose.

Features

The ui5-table can be enhanced in its functionalities by applying different features. Features can be slotted into the features slot, to enable them in the component. Features need to be imported separately, as they are not enabled by default.

The following features are currently available:

• TableSelection - adds selection capabilities to the table
• TableGrowing - provides growing capabilities to load more data

Keyboard Handling

This component provides a build in fast navigation group which can be used via [F6] / [Shift] + [F6] / [Ctrl] + [Alt/Option] / [Down] or [Ctrl] + [Alt/Option] + [Up]. In order to use this functionality, you need to import the following module: import "@ui5/webcomponents-base/dist/features/F6Navigation.js"

Furthermore, you can interact with ui5-table via the following keys:

If the focus is on a row, the following keyboard shortcuts are available:

• Down - Navigates down
• Up - Navigates up
• Right - Selects the first cell of the row
• Space - Toggles the selection of the row
• Ctrl/Cmd + A - In multi selection mode, toggles the selection of all rows
• Home - Navigates to the first row, if the focus is on the first row, navigates to the header row
• End - Navigates to the last row, if the focus is on the last row, navigates to the growing button
• Page Up - Navigates one page up, if the focus is on the first row, navigates to the header row
• Page Down - Navigates one page down, if the focus is on the last row, navigates to the growing button
• F2 - Focuses the first tabbable element in the row
• F7 - If focus position is remembered, moves focus to the corresponding focus position row, otherwise to the first tabbable element within the row
• [Shift]Tab - Move focus to the element in the tab chain outside the table

If the focus is on a cell, the following keyboard shortcuts are available:

• Down - Navigates down
• Up - Navigates up
• Right - Navigates right
• Left - Navigates left, if the focus is on the first cell of the row, the focus is moved to the row.
• Home - Navigates to the first cell of the current row, if the focus is on the first cell, navigates to the corresponding row
• End - Navigates to the last cell of the current row, if the focus is on the last cell, navigates to the corresponding row
• Page Up - Navigates one page up while keeping the focus in same column
• Page Down - Navigates one page down while keeping the focus in same column
• F2 - Toggles the focus between the first tabbable cell content and the cell
• Enter - Focuses the first tabbable cell content
• F7 - If the focus is on an interactive element inside a row, moves focus to the corresponding row and remembers the focus position of the element within the row
• [Shift]Tab - Move focus to the element in the tab chain outside the table

If the focus is on an interactive cell content, the following keyboard shortcuts are available:

• Down - Move the focus to the interactive element in the same column of the previous row, unless the focused element prevents the default
• Up - Move the focus to the interactive element in the same column of the next row, unless the focused element prevents the default
• [Shift]Tab - Move the focus to the element in the tab chain

ES6 Module Import

import "@ui5/webcomponents/dist/Table.js";
import "@ui5/webcomponents/dist/TableRow.js"; (ui5-table-row)
import "@ui5/webcomponents/dist/TableCell.js"; (ui5-table-cell)
import "@ui5/webcomponents/dist/TableHeaderRow.js"; (ui5-table-header-row)
import "@ui5/webcomponents/dist/TableHeaderCell.js"; (ui5-table-header-cell)

Basic Sample

Properties

accessibleName

Description	Defines the accessible ARIA name of the component.
Type	string | undefined
Default	undefined

accessibleNameRef

Description	Identifies the element (or elements) that labels the component.
Type	string | undefined
Default	undefined

noDataText

Description	Defines the text to be displayed when there are no rows in the component.
Type	string | undefined
Default	undefined

overflowMode

Description	Defines the mode of the ui5-table overflow behavior. Available options are: Scroll - Columns are shown as regular columns and horizontal scrolling is enabled. Popin - Columns are shown as pop-ins instead of regular columns.
Type	"Scroll" | "Popin"
Default	"Scroll"

loading

Description	Defines if the loading indicator should be shown. Note: When the component is loading, it is non-interactive.
Type	boolean
Default	false

loadingDelay

Description	Defines the delay in milliseconds, after which the loading indicator will show up for this component.
Type	number
Default	1000

Slots

default

Description	Defines the rows of the component. Note: Use ui5-table-row for the intended design.
Type	Array<TableRow>

headerRow

Description	Defines the header row of the component. Note: Use ui5-table-header-row for the intended design.
Type	Array<TableHeaderRow>

nodata

Description	Defines the custom visualization if there is no data available.
Type	Array<HTMLElement>

features

Description	Defines the features of the component.
Type	Array<ITableFeature>

Events

row-click

Description	Fired when an interactive row is clicked.
Type	CustomEvent<TableRowClickEventDetail>
Parameters	row: TableRow The row instance
Bubbles	Yes
Cancelable	No

move-over

Description	Fired when a movable item is moved over a potential drop target during a dragging operation. If the new position is valid, prevent the default action of the event using preventDefault(). Note: If the dragging operation is a cross-browser operation or files are moved to a potential drop target, the source parameter will be null.
Type	CustomEvent<TableMoveEventDetail>
Parameters	originalEvent: Event The original dragover event source: object The source object destination: object The destination object
Bubbles	Yes
Cancelable	Yes - via preventDefault()

move

Description	Fired when a movable list item is dropped onto a drop target. Notes: The move event is fired only if there was a preceding move-over with prevented default action. If the dragging operation is a cross-browser operation or files are moved to a potential drop target, the source parameter will be null.
Type	CustomEvent<TableMoveEventDetail>
Parameters	originalEvent: Event The original drop event source: object The source object destination: object The destination object
Bubbles	Yes
Cancelable	No

Methods

No methods available for this component.

CSS Parts

No CSS parts available for this component.

Base Functionalities

Overflow Mode

The table provides two horizontal overflow modes: Scroll (default) or Popin.

Scroll Mode

When the table's content does not fit horizontally into the viewport, a horizontal scrollbar is shown, allowing the user to scroll.

Popin Mode

The Popin mode is a responsive design feature tailored to adapt column layouts in UI grids or tables, particularly for smaller screens or constrained container widths.

When screen space becomes limited, Popin mode seamlessly reorganizes columns. Those that cannot fit within the available width are intelligently relocated to the "popin area", an allocated space designed specifically for accommodating additional columns.

You can influence the order of columns appearing the popin area, by defining the importance of each column.

Sticky Header Row

Enable a sticky header by utilizing the properties sticky and sticky-top of the ui5-table-header-row.

Sticky Behavior with scrollable table

Sticky Behavior with scrollable container

If your table is located inside of a scrollable container, you have other sticky content and your table is in Scroll mode, provide a height for the table for the sticky header to work as expected.

No Data

You can provide an illustration or a custom text, that is shown when the table has no data using the nodata slot.

Interactive Rows

Create an interactive table by marking ui5-table-row components as interactive. Pressing on an interactive row will fire the row-click event.

Drag and Drop

Enable Drag and Drop by using the move-over and move event in combination with the movable property on the ui5-table-row.