Drag and Drop

The grid supports drag and drop of rows. The drag and drop behavior can be customized by using the enableDrag prop of the ColumnOptions interface.

Enabling drag and drop

Live Editor

function App(){ const columns = [ { ...createColumn("employeeId", "string", "Id"), enableDrag: true, enableSort: false, }, { ...createColumn("firstName", "string", "First Name"), enableSort: false, }, { ...createColumn("lastName", "string", "Last Name"), enableSort: false, }, ]; return ( <ReactDataGrid style={{ height: "400px", width: "100%" }} gridOptions={{ enableSort: false, dataProvider: Employee.getAllEmployees(), uniqueIdentifierOptions: { useField: "employeeId", }, columns, }} /> ); }

function App(){
  const columns = [
    {
        ...createColumn("employeeId", "string", "Id"),
        enableDrag: true,
        enableSort: false,
    },
    {
        ...createColumn("firstName", "string", "First Name"),
        enableSort: false,
    },
    {
        ...createColumn("lastName", "string", "Last Name"),
        enableSort: false,
    },
  ];

  return (
    <ReactDataGrid
      style={{ height: "400px", width: "100%" }}
      gridOptions={{
        enableSort: false,
        dataProvider: Employee.getAllEmployees(),
        uniqueIdentifierOptions: {
          useField: "employeeId",
        },
        columns,
      }}
    />
  );
}

Result

Loading...

As you can see, we have enabled drag and drop for the Id column. Now, you can drag and drop rows from the Id column to any other column, this is pretty much all you need to do to enable drag and drop.

Sorting and Drag and Drop

When you enable drag and drop, sorting no longer makes sense. So, if you enable drag and drop, you should disable sorting.

Customizing drag and drop

The grid supports customizing the drag and drop behavior by using the dragOptions prop of the GridOptions interface. The dragOptions prop is an object that has the following properties:

export interface DragOptions {
  dragStart?: (dragRowIdentifier: string) => void;
  dragEnd?: (dragFrom: string, dragTo: string) => boolean;
  dragValid?: (dragFrom: string, dragTo: string) => boolean;
}  

dragStart

The dragStart prop is a callback that is called when the drag starts. The dragRowIdentifier is the unique identifier of the row that is being dragged.

dragEnd

The dragEnd prop is a callback that is called when the drag ends. The dragFrom is the unique identifier of the row that was dragged from. The dragTo is the unique identifier of the row that was dragged to. The dragEnd callback should return a boolean value. If the value is true, the drag and drop operation is successful. If the value is false, the drag and drop operation is not successful.

dragValid

The dragValid prop is a callback that is called when the drag is in progress. The dragFrom is the unique identifier of the row that was dragged from. The dragTo is the unique identifier of the row that was dragged to. The dragValid callback should return a boolean value. If the value is true, the drag and drop operation is valid. If the value is false, the drag and drop operation is not valid.

Example

Live Editor

function App(){ const columns = [ { ...createColumn("employeeId", "string", "Id"), enableDrag: true, enableSort: false, dragOptions: { dragStart: (dragRowIdentifier) => { console.log(`dragStart: ${dragRowIdentifier}`); }, dragEnd: (dragFrom, dragTo) => { if (dragFrom === dragTo) { return false; } return true; }, dragValid: (dragFrom, dragTo) => { if (dragFrom === dragTo) { return false; } return true; }, }, }, { ...createColumn("firstName", "string", "First Name"), enableSort: false, }, { ...createColumn("lastName", "string", "Last Name"), enableSort: false, }, ]; return ( <ReactDataGrid style={{ height: "400px", width: "100%" }} gridOptions={{ enableSort: false, dataProvider: Employee.getAllEmployees(), uniqueIdentifierOptions: { useField: "employeeId", }, columns, }} /> ); }

function App(){
  const columns = [
    {
        ...createColumn("employeeId", "string", "Id"),
        enableDrag: true,
        enableSort: false,

        dragOptions: {
          dragStart: (dragRowIdentifier) => {
            console.log(`dragStart: ${dragRowIdentifier}`);
          },
          dragEnd: (dragFrom, dragTo) => {
            if (dragFrom === dragTo) {
              return false;
            }
            return true;
          },
          dragValid: (dragFrom, dragTo) => {
            if (dragFrom === dragTo) {
              return false;
            }
            return true;
          },
        },
    },
    {
        ...createColumn("firstName", "string", "First Name"),
        enableSort: false,
    },
    {
        ...createColumn("lastName", "string", "Last Name"),
        enableSort: false,
    },
  ];

  return (
    <ReactDataGrid
      style={{ height: "400px", width: "100%" }}
      gridOptions={{
        enableSort: false,
        dataProvider: Employee.getAllEmployees(),
        uniqueIdentifierOptions: {
          useField: "employeeId",
        },
        columns,
      }}
    />
  );
}

Result

Loading...

In the example above, we have enabled drag and drop for the Id column. We have also customized the drag and drop behavior by using the dragOptions prop to ensure that the drag and drop operation is only successful when the dragFrom and dragTo are not the same. We have also added some logging to the dragStart and dragEnd callbacks.

Drag and Drop between grids

The grid supports drag and drop between grids. This is useful when you want to move rows from one grid to another. To enable drag and drop between grids, you need to set the enableDrag prop of the ColumnOptions interface to true for the column that you want to drag and drop from.

Live Editor

function App(){ const columns = [ { ...createColumn("employeeId", "string", "Id"), enableDrag: true, enableSort: false, }, { ...createColumn("firstName", "string", "First Name"), enableSort: false, }, { ...createColumn("lastName", "string", "Last Name"), enableSort: false, }, ]; return ( <div style={{ display: "flex", flexDirection: "row" }}> <ReactDataGrid style={{ height: "400px", width: "100%" }} gridOptions={{ dataProvider: Employee.getAllEmployees().slice(0, 5), uniqueIdentifierOptions: { useField: "employeeId", }, columns, }} /> <ReactDataGrid style={{ height: "400px", width: "100%" }} gridOptions={{ dataProvider: Employee.getAllEmployees().slice(5, 10), uniqueIdentifierOptions: { useField: "employeeId", }, columns: columns, }} /> </div> ); }

function App(){
  const columns = [
    {
        ...createColumn("employeeId", "string", "Id"),
        enableDrag: true,
        enableSort: false,
    },
    {
        ...createColumn("firstName", "string", "First Name"),
        enableSort: false,
    },
    {
        ...createColumn("lastName", "string", "Last Name"),
        enableSort: false,
    },
  ];

  return (
    <div style={{ display: "flex", flexDirection: "row" }}>
      <ReactDataGrid
        style={{ height: "400px", width: "100%" }}
        gridOptions={{
          dataProvider: Employee.getAllEmployees().slice(0, 5),
          uniqueIdentifierOptions: {
            useField: "employeeId",
          },
          columns,
        }}
      />
      <ReactDataGrid
        style={{ height: "400px", width: "100%" }}
        gridOptions={{
          dataProvider: Employee.getAllEmployees().slice(5, 10),
          uniqueIdentifierOptions: {
            useField: "employeeId",
          },
          columns: columns,
        }}
      />
    </div>
  );
}

Result

Loading...