DragDropProvider Plugin Reference

A plugin that implements the drag-and-drop functionality and visualizes columns that are being dragged.

Import

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';

User Reference

Dependencies

none

Properties

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.

Interfaces

DragDropProvider.ContainerProps

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.

DragDropProvider.ColumnProps

Describes properties of the component that renders a column being dragged.

Field Type Description
column Column Specifies a column being dragged.

Plugin Components

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.

Plugin Developer Reference

Imports

Name Plugin Type Description
columns Getter Array<Column> Columns available for dragging.
root Template object? A template that renders the grid's root layout.

Exports

Name Plugin Type Description
draggingEnabled Getter boolean Specifies whether drag-and-drop is enabled.