Skip to main content

Table

The ui5-table component provides a set of sophisticated and convenient functions for responsive table design. It provides a comprehensive set of features for displaying and dealing with vast amounts of data.

To render the Table properly, the order of the columns should match with the order of the item cells in the rows.

Desktop and tablet devices are supported. On tablets, special consideration should be given to the number of visible columns and rows due to the limited performance of some devices.

Selection​

To benefit from the selection mechanism of ui5-table component, you can use the available selection modes: SingleSelect and MultiSelect.

In additition to the used mode, you can also specify the ui5-table-row type choosing between Active or Inactive.

In SingleSelect mode, you can select both an Active and Inactive row via mouse or by pressing the Space or Enter keys.

In MultiSelect mode, you can select both an Active and Inactive row by pressing the Space key when a row is on focus or via mouse click over the selection checkbox of the row. In order to select all the available rows at once, you can use the selection checkbox presented in the table's header.

Note: Currently, when a column is shown as a pop-in, the visual indication for selection is not presented over it.

Keyboard Handling​

Fast Navigation​

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.

  • [F7] - If focus is on an interactive control inside an item, moves focus to the corresponding item.
  • [Ctrl]+[A] - Selects all items, if MultiSelect mode is enabled.
  • [Home]/[End] - Focuses the first/last item.
  • [Page Up]/[Page Down] - Moves focus up/down by page size (20 items by default).
  • [Alt]+[Down]/[Up] - Switches focus between header, last focused item, and More button (if applies) in either direction.
  • [Shift]+[Down]/[Up] - Selects the next/previous item in a MultiSelect table, if the current item is selected (Range selection). Otherwise, deselects them (Range deselection).
  • [Shift]+[Home]/[End] - Range selection to the first/last item of the List.
  • [Ctrl]+[Home]/[End] - Same behavior as HOME & END.

ES6 Module Import​

  • import "@ui5/webcomponents/dist/Table.js";
  • import "@ui5/webcomponents/dist/TableColumn.js"; (ui5-table-column)
  • import "@ui5/webcomponents/dist/TableRow.js"; (ui5-table-row)
  • import "@ui5/webcomponents/dist/TableGroupRow.js"; (ui5-table-group-row)
  • import "@ui5/webcomponents/dist/TableCell.js"; (ui5-table-cell)

Basic Sample​

Properties​

noDataText​

DescriptionDefines the text that will be displayed when there is no data and hideNoData is not present.
Typestring
Default""

growingButtonText​

DescriptionDefines the text that will be displayed inside the growing button at the bottom of the table, meant for loading more rows upon press.
Note: If not specified a built-in text will be displayed.
Note: This property takes effect if growing is set to Button.
Typestring
Default""
Since1.0.0-rc.15

growingButtonSubtext​

DescriptionDefines the subtext that will be displayed under the growingButtonText.
Note: This property takes effect if growing is set to Button.
Typestring
Default""
Since1.0.0-rc.15

hideNoData​

DescriptionDefines if the value of noDataText will be diplayed when there is no rows present in the table.
Typeboolean
Defaultfalse
Since1.0.0-rc.15

growing​

DescriptionDefines whether the table will have growing capability either by pressing a More button, or via user scroll. In both cases load-more event is fired.
Available options:
Button - Shows a More button at the bottom of the table, pressing of which triggers the load-more event.
Scroll - The load-more event is triggered when the user scrolls to the bottom of the table;
None (default) - The growing is off.
Restrictions: growing="Scroll" is not supported for Internet Explorer, and the component will fallback to growing="Button".
Type"Button" | "Scroll" | "None"
Default"None"
Since1.0.0-rc.12

busy​

DescriptionDefines if the table is in busy state.
In this state the component's opacity is reduced and busy indicator is displayed at the bottom of the table.
Typeboolean
Defaultfalse
Since1.0.0-rc.12

busyDelay​

DescriptionDefines the delay in milliseconds, after which the busy indicator will show up for this component.
Typenumber
Default1000

stickyColumnHeader​

DescriptionDetermines whether the column headers remain fixed at the top of the page during vertical scrolling as long as the Web Component is in the viewport.
Restrictions:
- Browsers that do not support this feature:
- Internet Explorer
- Microsoft Edge lower than version 41 (EdgeHTML 16)
- Mozilla Firefox lower than version 59
- Scrolling behavior:
- If the Web Component is placed in layout containers that have the overflow: hidden or overflow: auto style definition, this can prevent the sticky elements of the Web Component from becoming fixed at the top of the viewport.
Typeboolean
Defaultfalse

mode​

DescriptionDefines the mode of the component.
Type"None" | "SingleSelect" | "MultiSelect"
Default"None"
Since1.0.0-rc.15

accessibleName​

DescriptionDefines the accessible ARIA name of the component.
Typestring | undefined
Defaultundefined
Since1.3.0

accessibleNameRef​

DescriptionReceives id(or many ids) of the elements that label the component.
Typestring
Default""
Since1.3.0

Slots​

default​

DescriptionDefines the component rows.
Note: Use ui5-table-row for the intended design.
TypeArray<ITableRow>

columns​

DescriptionDefines the configuration for the columns of the component.
Note: Use ui5-table-column for the intended design.
TypeArray<TableColumn>

Events​

row-click​

DescriptionFired when a row in Active mode is clicked or Enter key is pressed.
TypeCustomEvent<TableRowClickEventDetail>
Parametersrow: HTMLElement
the activated row.

popin-change​

DescriptionFired when ui5-table-column is shown as a pop-in instead of hiding it.
TypeCustomEvent<TablePopinChangeEventDetail>
ParameterspoppedColumns: Array
popped-in columns.
Since1.0.0-rc.6

load-more​

DescriptionFired when the user presses the More button or scrolls to the table's end.
Note: The event will be fired if growing is set to Button or Scroll.
TypeCustomEvent
Since1.0.0-rc.11

selection-change​

DescriptionFired when selection is changed by user interaction in SingleSelect and MultiSelect modes.
TypeCustomEvent<TableSelectionChangeEventDetail>
ParametersselectedRows: Array
An array of the selected rows.
previouslySelectedRows: Array
An array of the previously selected rows.
Since1.0.0-rc.15

Methods​

No methods available for this component.

CSS Parts​

No CSS parts available for this component.

More Samples​

Active Rows​

Columns Popin​

Single Selection​

Multiple Selection​

Grouping​

Growing on Button Press​

Growing on Scroll​

No Data​