@ui5/webcomponents-react
Version:
React Wrapper for UI5 Web Components and additional components
84 lines (83 loc) • 6.2 kB
JavaScript
'use client';
import { withWebComponent } from '@ui5/webcomponents-react-base';
/**
* The `Table` component provides a set of sophisticated features for displaying and dealing with vast amounts of data in a responsive manner.
* To render the `Table`, you need to define the columns and rows. You can use the provided `TableHeaderRow` and `TableRow` components for this purpose.
*
* ### Features
*
* The `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:
*
* * [TableSelectionMulti](../TableSelectionMulti) - adds multi-selection capabilities to the table
* * [TableSelectionSingle](../TableSelectionSingle) - adds single-selection capabilities to the table
* * [TableGrowing](../TableGrowing) - provides growing capabilities to load more data
* * [TableVirtualizer](../TableVirtualizer) - adds virtualization capabilities to the table
*
* ### 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 `Table` via the following keys:
*
* If the focus is on a row, the following keyboard shortcuts are available:
* * <kbd>Down</kbd> - Navigates down
* * <kbd>Up</kbd> - Navigates up
* * <kbd>Right</kbd> - Selects the first cell of the row
* * <kbd>Space</kbd> - Toggles the selection of the row
* * <kbd>Ctrl/Cmd + A</kbd> - In multi selection mode, toggles the selection of all rows
* * <kbd>Home</kbd> - Navigates to the first row, if the focus is on the first row, navigates to the header row
* * <kbd>End</kbd> - Navigates to the last row, if the focus is on the last row, navigates to the growing button
* * <kbd>Page Up</kbd> - Navigates one page up, if the focus is on the first row, navigates to the header row
* * <kbd>Page Down</kbd> - Navigates one page down, if the focus is on the last row, navigates to the growing button
* * <kbd>F2</kbd> - Focuses the first tabbable element in the row
* * <kbd>F7</kbd> - If focus position is remembered, moves focus to the corresponding focus position row, otherwise to the first tabbable element within the row
* * <kbd>[Shift]Tab</kbd> - 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:
* * <kbd>Down</kbd> - Navigates down
* * <kbd>Up</kbd> - Navigates up
* * <kbd>Right</kbd> - Navigates right
* * <kbd>Left</kbd> - Navigates left, if the focus is on the first cell of the row, the focus is moved to the row.
* * <kbd>Home</kbd> - Navigates to the first cell of the current row, if the focus is on the first cell, navigates to the corresponding row
* * <kbd>End</kbd> - Navigates to the last cell of the current row, if the focus is on the last cell, navigates to the corresponding row
* * <kbd>Page Up</kbd> - Navigates one page up while keeping the focus in same column
* * <kbd>Page Down</kbd> - Navigates one page down while keeping the focus in same column
* * <kbd>F2</kbd> - Toggles the focus between the first tabbable cell content and the cell
* * <kbd>Enter</kbd> - Focuses the first tabbable cell content
* * <kbd>F7</kbd> - 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
* * <kbd>[Shift]Tab</kbd> - 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:
* * <kbd>Down</kbd> - Move the focus to the interactive element in the same column of the previous row, unless the focused element prevents the default
* * <kbd>Up</kbd> - Move the focus to the interactive element in the same column of the next row, unless the focused element prevents the default
* * <kbd>[Shift]Tab</kbd> - Move the focus to the element in the tab chain
*
* ### Accessibility
*
* The `Table` follows the [ARIA grid design pattern](https://www.w3.org/WAI/ARIA/apg/patterns/grid/).
* This pattern enables cell-based keyboard navigation and, as explained above, we also support row-based keyboard navigation.
* Since the grid design pattern does not inherently provide row-based keyboard behavior, if the focus is on a row, not only the row information but also the corresponding column headers for each cell must be announced.
* This can only be achieved through a custom accessibility announcement.
* To support this, UI5 Web Components expose its own accessibility metadata via the `accessibilityInfo` property.
* The `Table` uses this information to create the required custom announcements dynamically.
* If you include custom web components inside table cells that are not part of the standard UI5 Web Components set, their accessibility information can be provided using the `data-ui5-acc-text` attribute.
*
* )\
* `import "@ui5/webcomponents/dist/TableRow.js";` (`TableRow`)\
* `import "@ui5/webcomponents/dist/TableCell.js";` (`TableCell`)\
* `import "@ui5/webcomponents/dist/TableHeaderRow.js";` (`TableHeaderRow`)\
* `import "@ui5/webcomponents/dist/TableHeaderCell.js";` (`TableHeaderCell`)
*
* __Note:__ This is a UI5 Web Component! [Table UI5 Web Component Documentation](https://ui5.github.io/webcomponents/components/Table) | [Repository](https://github.com/UI5/webcomponents)
*
* @since [2.0.0](https://github.com/UI5/webcomponents/releases/tag/v2.0.0) of __@ui5/webcomponents__.
*/
const Table = withWebComponent('ui5-table', ['accessibleName', 'accessibleNameRef', 'loadingDelay', 'noDataText', 'overflowMode', 'rowActionCount'], ['alternateRowColors', 'loading'], ['features', 'headerRow', 'noData'], ['move-over', 'move', 'row-action-click', 'row-click']);
Table.displayName = 'Table';
export { Table };