A plugin that implements the drag-and-drop functionality and visualizes columns that are being dragged.
Use the following statement to import a plugin with embedded theme components:
import { DragDropProvider } from '@devexpress/dx-react-grid-material-ui';
// import { DragDropProvider } from '@devexpress/dx-react-grid-bootstrap4';
// import { DragDropProvider } from '@devexpress/dx-react-grid-bootstrap3';If you want to use custom components, you can import the themeless plugin:
import { DragDropProvider } from '@devexpress/dx-react-grid';none
| Name | Type | Default | Description |
|---|---|---|---|
| containerComponent | ComponentType<DragDropProvider.ContainerProps> | A component that renders a container for columns being dragged. | |
| columnComponent | ComponentType<DragDropProvider.ColumnProps> | A component that renders a column being dragged. |
Describes properties of the component that renders a container for columns being dragged.
| Field | Type | Description |
|---|---|---|
| clientOffset | { x: number, y: number } | The current offset of a column that is being dragged. The offset is measured against the application's client area. |
| children | ReactNode | A React node representing columns being dragged. |
Describes properties of the component that renders a column being dragged.
| Field | Type | Description |
|---|---|---|
| column | Column | Specifies a column being dragged. |
| Name | Properties | Description |
|---|---|---|
| DragDropProvider.Container | DragDropProvider.ContainerProps | A component that renders a container for columns being dragged. |
| DragDropProvider.Column | DragDropProvider.ColumnProps | A component that renders a column being dragged. |
Additional properties are added to the component's root element.
| Name | Plugin | Type | Description |
|---|---|---|---|
| columns | Getter | Array<Column> | Columns available for dragging. |
| root | Template | object? | A template that renders the grid's root layout. |
| Name | Plugin | Type | Description |
|---|---|---|---|
| draggingEnabled | Getter | boolean | Specifies whether drag-and-drop is enabled. |