AG Grid React: How to get the state of rows after changing the order?

Question

After implementing the drag and drop feature on AG Grid table, I'm looking for a way to get the current state with the updated order/index of rows.
My goal is to persist the table data after changing the order, but can't find the respective state of the current order. I'd appreciate any help or any idea.
Sandbox demo and example code below

import React from "react";
import { AgGridReact } from "ag-grid-react";
import "ag-grid-community/dist/styles/ag-grid.css";
import "ag-grid-community/dist/styles/ag-theme-alpine.css";
function App() {
  const [gridApi, setGridApi] = React.useState(null);
  const [gridColumnApi, setGridColumnApi] = React.useState(null);

  const onGridReady = (params) => {
    setGridApi(params.api);
    setGridColumnApi(params.columnApi);
  };

  const defaultColDef = {
    flex: 1,
    editable: true
  };

  const columnDefs = [
    {
      headerName: "Name",
      field: "name",
      rowDrag: true
    },
    { headerName: "stop", field: "stop" },
    {
      headerName: "duration",
      field: "duration"
    }
  ];

  const rowData = React.useMemo(
    () => [
      {
        name: "John",
        stop: 10,
        duration: 5
      },
      {
        name: "David",
        stop: 15,
        duration: 8
      },
      {
        name: "Dan",
        stop: 20,
        duration: 6
      }
    ],
    []
  );

  return (
    <div>
      <h1 align="center">React-App</h1>
      <div>
        <div className="ag-theme-alpine" style={{ height: "700px" }}>
          <AgGridReact
            columnDefs={columnDefs}
            rowData={rowData}
            defaultColDef={defaultColDef}
            onGridReady={onGridReady}
            rowDragManaged={true}
          ></AgGridReact>
        </div>
      </div>
    </div>
  );
}

export default App;

Answer 1

You're currently using managed dragging by passing rowManagedDragging={true}, which means the AgGridReact component is managing the row order state.

If you want to maintain row order state outside the component, you need to use Unmanaged Dragging.

Add a handler for onRowDragMove, and use the node and overIndex or overNode properties of the event to update your local event order state, and pass it to the AgGridReact component to re-render.

Take a look at this example from the docs