A plugin that visualizes a focused table cell.
Use the following statement to import the plugin with embedded theme components:
import { TableKeyboardNavigation } from '@devexpress/dx-react-grid-material-ui';
// import { TableKeyboardNavigation } from '@devexpress/dx-react-grid-bootstrap4';
// import { TableKeyboardNavigation } from '@devexpress/dx-react-grid-bootstrap3';
If you want to use custom components, you can import the themeless plugin:
import { TableKeyboardNavigation } from '@devexpress/dx-react-grid';
Name | Type | Default | Description |
---|---|---|---|
defaultFocusedCell | { rowKey: string, columnKey: string } | Defines a cell that should be initially focused in uncontrolled mode. | |
focusedCell | { rowKey: string, columnKey: string } | Defines a cell that should be focused. | |
onFocusedCellChange | (focusedCell: { rowKey: string, columnKey: string }) => void | A function that is executed when a cell gets focus. | |
cellComponent | ComponentType<TableKeyboardNavigation.CellProps> | A component that renders the focused cell. | |
rowComponent | ComponentType<TableKeyboardNavigation.RowProps> | A component that renders the row that contains the focused cell. | |
focusedRowEnabled | boolean | false | Specifies whether a row should be focused when one of its cells is focused. |
Properties passed to the cellComponent
.
Extends Table.CellProps
Field | Type | Description |
---|---|---|
focused | boolean | Indicates whether the cell is focused. |
component | ComponentType<Table.CellProps> | A component that renders the focused cell. |
Properties passed to the rowComponent
Extends Table.RowProps
Field | Type | Description |
---|---|---|
focused | boolean | true if focusedRowEnabled is enabled and the row contains a focused cell. |
component | ComponentType<Table.RowProps> | A component that renders the row. |
Name | Properties | Description |
---|---|---|
TableKeyboardNavigation.Cell | TableKeyboardNavigation.CellProps | A component that renders the focused cell. |
TableKeyboardNavigation.Row | TableKeyboardNavigation.RowProps | A component that renders the focused row. |
Additional properties are added to the component's root element.
Name | Plugin | Type | Description |
---|---|---|---|
tableColumns | Getter | Array<TableColumn> | Table columns. |
tableBodyRows | Getter | Array<TableRow> | Body rows to be rendered. |
tableHeaderRows | Getter | Array<TableRow> | Header rows to be rendered. |
expandedRowIds | Getter | Array<number | string> | Currently expanded rows. |
none