---
title: "Row Grouping - Row Dragging"
enterprise: true
framework: react
version: "36.1.0"
---

# Row Grouping - Row Dragging

Row dragging can be combined with [Row Grouping](https://www.ag-grid.com/react-data-grid/grouping/). This page focuses on grouping-specific configuration; see the [Row Dragging](https://www.ag-grid.com/react-data-grid/row-dragging/) overview for the general capabilities and limitations of the feature.

## Managed Row Dragging

[Managed Row Dragging](https://www.ag-grid.com/react-data-grid/row-dragging-managed/) can update grouped data automatically. The grid moves the dragged rows or groups and updates the underlying row data.

In this example, users can drag athletes and groups of athletes between countries.

#### Managed Row Drag Across Regions

```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 {
  AutoGroupColumnDef,
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  GetRowIdFunc,
  GridApi,
  GridOptions,
  ModuleRegistry,
  NumberEditorModule,
  NumberFilterModule,
  RowDragModule,
  RowSelectionModule,
  RowSelectionOptions,
  TextEditorModule,
  TextFilterModule,
  enableDevValidations,
} from "ag-grid-community";
import { BatchEditModule, RowGroupingModule } from "ag-grid-enterprise";
import { getAthletesData } from "./data";
import { IAthlete } from "./types";

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

const modules = [
  ClientSideRowModelModule,
  RowGroupingModule,
  RowDragModule,
  RowSelectionModule,
  TextEditorModule,
  TextFilterModule,
  NumberEditorModule,
  NumberFilterModule,
  BatchEditModule,
];

const GridExample = () => {
  const containerStyle = useMemo(() => ({ width: "100%", height: "100%" }), []);
  const gridStyle = useMemo(() => ({ height: "100%", width: "100%" }), []);
  const [rowData, setRowData] = useState<IAthlete[]>(getAthletesData());
  const [columnDefs, setColumnDefs] = useState<ColDef[]>([
    { field: "country", width: 120, rowGroup: true, editable: true },
    { field: "year", width: 90, rowGroup: true, editable: true },
    { field: "athlete", minWidth: 150 },
    { field: "age", minWidth: 50, filter: "agNumberColumnFilter" },
    { field: "date", width: 110 },
    { field: "sport", width: 110 },
    { field: "gold", width: 110 },
    { field: "silver", width: 110 },
    { field: "bronze", width: 110 },
  ]);
  const defaultColDef = useMemo<ColDef>(() => {
    return {
      sortable: true,
      filter: true,
    };
  }, []);
  const autoGroupColumnDef = useMemo<AutoGroupColumnDef>(() => {
    return {
      rowDrag: true,
      width: 250,
    };
  }, []);
  const rowSelection = useMemo<
    RowSelectionOptions | "single" | "multiple"
  >(() => {
    return { mode: "multiRow", headerCheckbox: false };
  }, []);
  const getRowId = useCallback(({ data }) => data.id, []);

  return (
    <AgGridProvider modules={modules}>
      <div style={containerStyle}>
        <div style={gridStyle}>
          <AgGridReact<IAthlete>
            rowData={rowData}
            columnDefs={columnDefs}
            defaultColDef={defaultColDef}
            autoGroupColumnDef={autoGroupColumnDef}
            animateRows={true}
            groupDefaultExpanded={-1}
            rowDragManaged={true}
            suppressMoveWhenRowDragging={true}
            refreshAfterGroupEdit={true}
            rowDragMultiRow={true}
            rowSelection={rowSelection}
            getRowId={getRowId}
          />
        </div>
      </div>
    </AgGridProvider>
  );
};

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

[Live example: Managed Row Drag Across Regions](https://www.ag-grid.com/examples/grouping-row-dragging/managed-row-group-drag-multi-level/reactFunctionalTs/)

## Configuration

When using managed row dragging with grouping the following configuration is required:

- `getRowId` is required to uniquely identify rows.
- `rowDragManaged=true` is needed to enable managed dragging.
- `refreshAfterGroupEdit=true` is required so the grid re-evaluates the groups immediately after a drag changes the grouped column values.
- `rowDrag=true` needs to be set in a column or in the auto group column definitions or the `rowDragEntireRow=true` in the grid options.
- `suppressMoveWhenRowDragging=true` to avoid the performance penalty of rebuilding the whole hierarchy while dragging and to avoid the grid reordering rows mid-drag, which otherwise causes large visual jumps when parent branches move.
- `BatchEditModule` is recommended, together with `TextEditorModule` (or your preferred editor modules) and to handle edit and batch edit events.
- Managed drag works only with [Client-Side Row Model](https://www.ag-grid.com/react-data-grid/row-models/#client-side).

See [Editing Groups](https://www.ag-grid.com/react-data-grid/grouping-edit/) for more on editing grouped data and `refreshAfterGroupEdit`.

## API Reference

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `rowDragManaged` | `boolean` |  | `false` | Set to `true` to enable Managed Row Dragging. Module: [`RowDragModule`](https://www.ag-grid.com/react-data-grid/modules/). |
| `suppressMoveWhenRowDragging` | `boolean` |  | `false` | Set to `true` to suppress moving rows while dragging the `rowDrag` waffle. This option highlights the position where the row will be placed and it will only move the row on mouse up. Module: [`RowDragModule`](https://www.ag-grid.com/react-data-grid/modules/). |

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `refreshAfterGroupEdit` | `boolean` |  | `false` | When `true`, the grid re-evaluates the grouping hierarchy after editing a grouped column value, moving the row to the correct group instantly. Also enables managed row dragging to update grouped column values so rows can move between groups. Modules (any of): [`RowGroupingModule`](https://www.ag-grid.com/react-data-grid/modules/), [`TreeDataModule`](https://www.ag-grid.com/react-data-grid/modules/). |

## Unmanaged Row Dragging with Groups

[Unmanaged Row Dragging](https://www.ag-grid.com/react-data-grid/row-dragging-unmanaged/) can update the group membership in application code by handling the row drag events and mutating the data that drives the grid. This keeps all row models and grid features available because the grid simply emits events.

The example below shows unmanaged row dragging with [Row Grouping](https://www.ag-grid.com/react-data-grid/grouping/) where the following can be noted:

- The **Athlete** column enables a drag handle only for leaf rows via the callback version of `rowDrag`.
- Because the grid does not manage reordering, dragging remains available even while sorting or filtering is applied.
- The example listens to `onRowDragMove` to change the `country` for the dragged row in real time, and uses `api.applyTransaction({ update: [...] })` to commit the change.
- The application can decide whether to update rows during the drag or after `rowDragEnd`, and can allow changes regardless of sort and filter state.

#### Unmanaged Row Drag with Grouping

```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 {
  ClientSideRowModelApiModule,
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  GridApi,
  GridOptions,
  GridReadyEvent,
  ModuleRegistry,
  NumberFilterModule,
  RowDragCallbackParams,
  RowDragEndEvent,
  RowDragModule,
  enableDevValidations,
} from "ag-grid-community";
import {
  ColumnMenuModule,
  ColumnsToolPanelModule,
  ContextMenuModule,
  RowGroupingModule,
  SetFilterModule,
} from "ag-grid-enterprise";
import { getData } from "./data";

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

const modules = [
  RowDragModule,
  ClientSideRowModelApiModule,
  NumberFilterModule,
  ClientSideRowModelModule,
  ColumnsToolPanelModule,
  ColumnMenuModule,
  ContextMenuModule,
  RowGroupingModule,
  SetFilterModule,
];

const rowDrag = function (params: RowDragCallbackParams) {
  // only rows that are NOT groups should be draggable
  return !params.node.group;
};

const GridExample = () => {
  const gridRef = useRef<AgGridReact>(null);
  const containerStyle = useMemo(() => ({ width: "100%", height: "100%" }), []);
  const gridStyle = useMemo(() => ({ height: "100%", width: "100%" }), []);
  const [rowData, setRowData] = useState<any[]>();
  const [columnDefs, setColumnDefs] = useState<ColDef[]>([
    { field: "athlete", rowDrag: rowDrag },
    { field: "country", rowGroup: true },
    { field: "year", width: 100 },
    { field: "date" },
    { field: "sport" },
    { field: "gold" },
    { field: "silver" },
    { field: "bronze" },
  ]);
  const defaultColDef = useMemo<ColDef>(() => {
    return {
      width: 170,
      filter: true,
    };
  }, []);

  const onGridReady = useCallback((params: GridReadyEvent) => {
    setRowData(getData());
  }, []);

  const onRowDragMove = useCallback((event: RowDragEndEvent) => {
    const movingNode = event.node!;
    const overNode = event.overNode!;
    // find out what country group we are hovering over
    let groupCountry;
    if (overNode.group) {
      // if over a group, we take the group key (which will be the
      // country as we are grouping by country)
      groupCountry = overNode.key;
    } else {
      // if over a non-group, we take the country directly
      groupCountry = overNode.data.country;
    }
    const needToChangeParent = movingNode.data.country !== groupCountry;
    if (needToChangeParent) {
      const movingData = movingNode.data;
      movingData.country = groupCountry;
      gridRef.current!.api.applyTransaction({
        update: [movingData],
      });
      gridRef.current!.api.clearFocusedCell();
    }
  }, []);

  return (
    <AgGridProvider modules={modules}>
      <div style={containerStyle}>
        <div style={gridStyle}>
          <AgGridReact
            ref={gridRef}
            rowData={rowData}
            columnDefs={columnDefs}
            defaultColDef={defaultColDef}
            groupDefaultExpanded={1}
            onGridReady={onGridReady}
            onRowDragMove={onRowDragMove}
          />
        </div>
      </div>
    </AgGridProvider>
  );
};

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

[Live example: Unmanaged Row Drag with Grouping](https://www.ag-grid.com/examples/grouping-row-dragging/unmanaged-row-group-drag/reactFunctionalTs/)