Row Dragging

Row dragging is used to rearrange rows by dragging the row with the mouse. There are actually two ways in which row dragging works in the grid: managed and unmanaged:

• Managed dragging is the simplest, where the grid will rearrange rows as you drag them.
• Unmanaged dragging is more complex but more powerful. The grid will not rearrange rows as you drag. Instead, grid will fire events that the app is responsible for responding to.

We're covering managed dragging here, but you can read the docs on unmanaged dragging to learn more about it.

To enable row dragging, set the column property rowDrag on one (typically the first) column. We'll do that with the ID column:

// App.js
// this.state column definitions
{
  headerName: "ID",
  field: "id",
  width: 80,
  lockPosition: true,
  rowDrag: true,
},

We also need to set the rowDragManaged property to true. We'll do that first in our state:

// App.js
// this.state
rowDragManaged: true,

And then add the corresponding prop to our AgGridReact component:

// App.js
// AgGridReact component props
rowDragManaged={this.state.rowDragManaged}

You should now be able to drag the rows around.

To animate the rows as we drag them around, first add the animateRows property to this.state:

animateRows: true,

Then, add the corresponding prop to the AgGridReact component:

// App.js
// AgGridReact component props
animateRows={this.state.animateRows}

Let's also make a button that will toggle our ability to drag rows in the grid. To do this, we'll need to add the suppressRowDrag property to our state:

// App.js
// this.state
suppressRowDrag: false,

Then, we can add a function to our component that calls setState:

// App.js
toggleRowDrag = () => {
    this.setState({ suppressRowDrag: !this.state.suppressRowDrag });
  };

Once that state gets updated, we can call the grid API to toggle row dragging in the componentDidUpdate lifecycle method:

// App.js
componentDidUpdate(prevProps, prevState) {
  if (prevState.suppressRowDrag !== this.state.suppressRowDrag) {
    this.gridApi.setSuppressRowDrag(this.state.suppressRowDrag);
  }
}

Finally, let's add our button above the AgGridReact component:

// App.js
<button type="button" onClick={this.toggleRowDrag}>
   Toggle Row Drag
</button>

We're now able to toggle dragging rows around!