---
title: "Row Dragging"
framework: react
version: "36.1.0"
---

# Row Dragging

Row dragging is used to rearrange rows by dragging the row with the mouse. To enable row dragging, set the column property `rowDrag` on one (typically the first) column.

#### Row Drag Simple Managed

```tsx
"use client";

import React, {
  useCallback,
  useMemo,
  useRef,
  useState,
  StrictMode,
} from "react";
import { createRoot } from "react-dom/client";
import { AgGridReact, AgGridProvider } from "ag-grid-react";
import {
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  GridApi,
  GridOptions,
  ModuleRegistry,
  NumberFilterModule,
  RowDragModule,
  TextFilterModule,
  enableDevValidations,
} from "ag-grid-community";
import { IOlympicData } from "./interfaces";
import { useFetchJson } from "./useFetchJson";

if (process.env.NODE_ENV !== "production") {
  enableDevValidations();
}

const modules = [
  TextFilterModule,
  NumberFilterModule,
  RowDragModule,
  ClientSideRowModelModule,
];

const GridExample = () => {
  const containerStyle = useMemo(() => ({ width: "100%", height: "100%" }), []);
  const gridStyle = useMemo(() => ({ height: "100%", width: "100%" }), []);

  const [columnDefs, setColumnDefs] = useState<ColDef[]>([
    { field: "athlete", rowDrag: true },
    { field: "country" },
    { field: "year", width: 100 },
    { field: "date" },
    { field: "sport" },
    { field: "gold" },
    { field: "silver" },
    { field: "bronze" },
  ]);
  const defaultColDef = useMemo<ColDef>(() => {
    return {
      width: 170,
      filter: true,
    };
  }, []);

  const { data, loading } = useFetchJson<IOlympicData>(
    "https://www.ag-grid.com/example-assets/olympic-winners.json",
  );

  return (
    <AgGridProvider modules={modules}>
      <div style={containerStyle}>
        <div style={gridStyle}>
          <AgGridReact<IOlympicData>
            rowData={data}
            loading={loading}
            columnDefs={columnDefs}
            defaultColDef={defaultColDef}
            rowDragManaged={true}
          />
        </div>
      </div>
    </AgGridProvider>
  );
};

const root = createRoot(document.getElementById("root")!);
root.render(
  <StrictMode>
    <GridExample />
  </StrictMode>,
);
```

[Live example: Row Drag Simple Managed](https://www.ag-grid.com/examples/row-dragging/simple-managed/reactFunctionalTs/)

The example above shows [Managed Row Dragging](https://www.ag-grid.com/react-data-grid/row-dragging-managed/), enabled by setting `rowDrag` on the column and `rowDragManaged` on the grid options.

## Enabling Row Dragging

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `rowDrag` | `boolean \| RowDragCallback` |  | `false` | `boolean` or `Function`. Set to `true` (or return `true` from function) to allow row dragging. Module: [`RowDragModule`](https://www.ag-grid.com/react-data-grid/modules/). |

To enable row dragging on all rows, set the column property `rowDrag = true` on one (typically the first) column and configure managed or unmanaged row dragging.

```jsx
const [columnDefs, setColumnDefs] = useState([
    // make all rows draggable
    { field: 'athlete', rowDrag: true },
]);

<AgGridReact columnDefs={columnDefs} />
```

It is also possible to dynamically control which rows are draggable by providing a callback function as shown below:

```jsx
const [columnDefs, setColumnDefs] = useState([
    // only allow non-group rows to be dragged
    { field: 'athlete', rowDrag: params => !params.node.group },
]);

<AgGridReact columnDefs={columnDefs} />
```

There are two ways in which row dragging works in the grid, managed and unmanaged:

- **[Managed Row Dragging](https://www.ag-grid.com/react-data-grid/row-dragging-managed/)**: This is the simplest, where the grid will rearrange rows as you drag them.
- **[Unmanaged Row Dragging](https://www.ag-grid.com/react-data-grid/row-dragging-unmanaged/)**: This is more complex and more powerful. The grid will not rearrange rows as you drag. Instead the application is responsible for responding to events fired by the grid and rows are rearranged by the application.

See also:

- [Row Dragging with Tree Data](https://www.ag-grid.com/react-data-grid/tree-data-row-dragging/), both for managed and unmanaged row dragging with [Tree Data](https://www.ag-grid.com/react-data-grid/tree-data/).
- [Row Dragging Between Grids](https://www.ag-grid.com/react-data-grid/row-dragging-to-grid/) to drag rows between two grids.
- [Row Dragging to an External DropZone](https://www.ag-grid.com/react-data-grid/row-dragging-to-external-dropzone/) to drag rows from the grid to an external drop zone.