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 ?
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