Table
The @ui5/webcomponents-compat package is introduced since 2.0 and includes the Table web component that was previously part of the main @ui5/webcomponents package in version 1.x. It has been replaced by brand new Table web component implementation, availabe since 2.0 in @ui5/webcomponents package. The current one, in @ui5/webcomponents-compat, is kept for compatibility.
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-compat/dist/Table.js";
import "@ui5/webcomponents-compat/dist/TableColumn.js";
(ui5-table-column
)import "@ui5/webcomponents-compat/dist/TableRow.js";
(ui5-table-row
)import "@ui5/webcomponents-compat/dist/TableGroupRow.js";
(ui5-table-group-row
)import "@ui5/webcomponents-compat/dist/TableCell.js";
(ui5-table-cell
)
Basic Sample​
Properties​
noDataText​
growingButtonText​
growingButtonSubtext​
hideNoData​
growing​
busy​
busyDelay​
stickyColumnHeader​
mode​
accessibleName​
accessibleNameRef​
Slots​
default​
columns​
Events​
row-click​
popin-change​
load-more​
selection-change​
Methods​
No methods available for this component.
CSS Parts​
No CSS parts available for this component.