Row drag and drop is not working in detail of master table on Ag-grid

Question

I am using the ag-grid solution to display the data in table. Ag grid has Master/Detail feature to display the data in sub table. Basically when you click on a row from the master table, it will display the another/sub/detail table under the row.

This is the example of master/detail for ag-grid.

The row drag and drop is working fine when we use simple table (not master/detail table). But the drag and drop is not working for master/detail table.

I am providing the grid options for the detail table, something like this

detailGridOptions: {
    columnDefs: [
        { field: 'callId', rowDrag: true},
        { field: 'direction' },
        { field: 'number', minWidth: 150 },
        { field: 'duration', valueFormatter: "x.toLocaleString() + 's'" },
        { field: 'switchCode', minWidth: 150 },
    ],
    defaultColDef: {
        sortable: true,
        flex: 1,
    }
}

According the grid options, the first column(callId) should be draggable, but it's not working, you can see the complete code here.

Why this is drag/drop row is not working on master/detail feature of ag-grid ?

Answer 1

Instead of master detail approach, you can also try it with row grouping. It has a similar view and may be an alternative for you.

In the following example, the data is grouped by country and drag/drop feature can be used to exchange rows between countries. We can think of the country as master and the other rows as details.

const [columnDefs, setColumnDefs] = useState([
  { field: 'athlete', rowDrag: rowDrag },
  { field: 'country', rowGroup: true },
  { field: 'year', width: 100 },
  { field: 'date' },
  { field: 'sport' },
  { field: 'gold' },
  { field: 'silver' },
  { field: 'bronze' },
]);

Full Example (Dragging & Row Grouping)

https://www.ag-grid.com/examples/row-dragging/dragging-with-row-groups/packages/vanilla/index.html