A plugin that renders detail rows.
Use the following statement to import a plugin with embedded theme components:
import { TableRowDetail } from '@devexpress/dx-react-grid-material-ui';
// import { TableRowDetail } from '@devexpress/dx-react-grid-bootstrap4';
// import { TableRowDetail } from '@devexpress/dx-react-grid-bootstrap3';If you want to use custom components, you can import the themeless plugin:
import { TableRowDetail } from '@devexpress/dx-react-grid';| Name | Type | Default | Description |
|---|---|---|---|
| contentComponent? | ComponentType<TableRowDetail.ContentProps> | A component that renders the detail row's content within the detail cell. | |
| cellComponent | ComponentType<TableRowDetail.CellProps> | A component that renders a detail cell. | |
| rowComponent | ComponentType<TableRowDetail.RowProps> | A component that renders a detail row. | |
| toggleCellComponent | ComponentType<TableRowDetail.ToggleCellProps> | A component that renders a cell containing the expand/collapse control. | |
| toggleColumnWidth | number | Specifies the width of the column containing expand/collapse controls. | |
| rowHeight? | number | Specifies the detail row height. |
Describes properties passed to a component that renders a detail row's content.
| Field | Type | Description |
|---|---|---|
| row | any | A row. |
Describes properties passed to a component that renders a detail cell.
Extends Table.CellProps
| Field | Type | Description |
|---|---|---|
| row | any | A row. |
| children? | ReactNode | A detail cell's child React node. |
Describes properties passed to a component that renders a detail row.
Extends Table.RowProps
| Field | Type | Description |
|---|---|---|
| row | any | A row. |
Describes properties passed to a component that renders a cell containing the expand/collapse control.
Extends Table.CellProps
| Field | Type | Description |
|---|---|---|
| row | any | A row. |
| expanded | boolean | Specifies whether to expand the detail row. |
| onToggle | () => void | An event that initiates row expanding or collapsing. |
| Name | Properties | Description |
|---|---|---|
| TableRowDetail.Cell | TableRowDetail.CellProps | A component that renders a detail cell. |
| TableRowDetail.Row | TableRowDetail.RowProps | A component that renders a detail row. |
| TableRowDetail.ToggleCell | TableRowDetail.ToggleCellProps | A component that renders a cell containing the expand/collapse control. |
Additional properties are added to the component's root element.
| Field | Type | Description |
|---|---|---|
| COLUMN_TYPE | symbol | The detail column type's identifier. |
| ROW_TYPE | symbol | The detail row type's indentifier. |
| Name | Plugin | Type | Description |
|---|---|---|---|
| tableColumns | Getter | Array<TableColumn> | Table columns. |
| tableBodyRows | Getter | Array<TableRow> | Body rows to be rendered. |
| expandedDetailRowIds | Getter | Array<number | string> | Expanded rows IDs. |
| toggleDetailRowExpanded | Action | ({ rowId: number | string, state?: boolean }) => void | Expands/collapses the specified row. 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). |
| 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 detail cell. |
| tableBodyRows | Getter | Array<TableRow> | Body rows to be rendered, including detailed rows. |