A plugin that visualizes table rows' selection state by rendering selection checkboxes and highlighting the selected rows.
Use the following statement to import a plugin with embedded theme components:
import { TableSelection } from '@devexpress/dx-react-grid-material-ui';
// import { TableSelection } from '@devexpress/dx-react-grid-bootstrap4';
// import { TableSelection } from '@devexpress/dx-react-grid-bootstrap3';If you want to use custom components, you can import the themeless plugin:
import { TableSelection } from '@devexpress/dx-react-grid';| Name | Type | Default | Description |
|---|---|---|---|
| highlightRow? | boolean | false | Specifies whether to highlight the selected rows. Note that Table plugin's rowComponent is ignored in this case. |
| selectByRowClick? | boolean | false | Specifies whether a user can select/deselect a row by clicking it. Note that Table plugin's rowComponent is ignored in this case. |
| showSelectAll? | boolean | true | Specifies whether to render the Select All checkbox in the header row. |
| showSelectionColumn? | boolean | true | Specifies whether to render the selection column that displays selection checkboxes. |
| cellComponent | ComponentType<TableSelection.CellProps> | A component that renders a selection cell (a cell containing a selection checkbox). | |
| headerCellComponent | ComponentType<TableSelection.HeaderCellProps> | A component that renders a cell containing the Select All checkbox. | |
| rowComponent | ComponentType<TableSelection.RowProps> | A component that renders a selected row. It is used instead of Table.Row when highlightRow or selectByRowClick is enabled. |
|
| selectionColumnWidth | number | The selection column's width. |
Describes properties passed to a component that renders a cell containing the Select All checkbox.
Extends Table.CellProps
| Field | Type | Description |
|---|---|---|
| disabled | boolean | Indicates if there are no rows that can be selected. |
| allSelected | boolean | Indicates whether all the rows available for selection are selected. |
| someSelected | boolean | Indicates whether at least one but not all rows available for selection are selected. |
| onToggle | (select?: boolean) => void | Toggles the Select All checkbox state. |
Describes properties passed to a component that renders a cell containing a selection checkbox.
Extends Table.CellProps
| Field | Type | Description |
|---|---|---|
| row | any | A row. |
| selected | boolean | Indicates whether a row is selected. |
| onToggle | () => void | An event that initiates row selecting or deselecting. |
Properties passed to the rowComponent.
Extends Table.RowProps
| Field | Type | Description |
|---|---|---|
| selectByRowClick | boolean | Indicates if users can click the row to select it. |
| highlighted | boolean | Indicates whether the row is highlighted. true when highlightRow is enabled and the row is selected. |
| onToggle | () => void | A function that is executed when users select the row or cancel the selection. |
| Name | Properties | Description |
|---|---|---|
| TableSelection.HeaderCell | TableSelection.HeaderCellProps | A component that renders a cell with the selection control inside the heading row. |
| TableSelection.Cell | TableSelection.CellProps | A component that renders a cell with selection control. |
Additional properties are added to the component's root element.
| Field | Type | Description |
|---|---|---|
| COLUMN_TYPE | symbol | The selection column type's indentifier. |
| Name | Plugin | Type | Description |
|---|---|---|---|
| tableColumns | Getter | Array<TableColumn> | Table columns. |
| tableBodyRows | Getter | Array<TableRow> | Body rows to be rendered. |
| selection | Getter | Array<number | string> | The selected row's IDs. |
| toggleSelection | Action | ({ rowIds: Array<number | string>, state?: boolean }) => void | A function that selects/deselects rows. The state argument specifies whether the rows should be selected (true), deselected (false), or their selection status should be set to the opposite value (undefined). In the last case, the function selects unselected rows and deselects selected ones. To select/deselect a single row, pass an array with a single item to the rowIds argument. |
| toggleSelectAll | Action | (state?: boolean) => void | A function that selects/deselects all rows. The state argument specifies whether the rows should be selected (true), deselected (false), or their selection status should be set to the opposite value (undefined). In the last case, the function selects all rows or deselects all selected ones. |
| selectAllAvailable | Getter | boolean | Indicates whether there are rows that are available for selection. |
| allSelected | Getter | boolean | Indicates whether all the rows available for selection are selected. |
| someSelected | Getter | boolean | Indicates whether some rows are selected. False if all/none rows are selected. |
| tableCell | Template | Table.CellProps | A template that renders a table cell. |
| tableRow | Template | Table.RowProps | A template that renders a table row. |
| Name | Plugin | Type | Description |
|---|---|---|---|
| tableColumns | Getter | Array<TableColumn> | Table columns including the selection column. |
| tableBodyRows | Getter | Array<TableRow> | Body rows to be rendered including the selected rows. |