Estoy usando la solución ag-grid para mostrar los datos en la tabla. Ag Grid tiene la función Maestro/Detalle para mostrar los datos en la subtabla. Básicamente, cuando hace clic en una fila de la tabla maestra, se mostrará otra tabla/sub/detalle debajo de la fila.
Este es el ejemplo de maestro/detalle para ag-grid.
La función de arrastrar y soltar filas funciona bien cuando usamos una tabla simple (no una tabla maestra/detalle). Pero arrastrar y soltar no funciona para la tabla principal/detalle.
Estoy proporcionando las opciones de cuadrícula para la tabla de detalles, algo como esto
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, } }De acuerdo con las opciones de la cuadrícula, la primera columna (callId) debería poder arrastrarse, pero no funciona, puede ver el código completo aquí .
¿Por qué esta fila de arrastrar/soltar no funciona en la función maestro/detalle de ag-grid?
En lugar del enfoque de detalle maestro, también puede probarlo con la agrupación de filas. Tiene una vista similar y puede ser una alternativa para ti.
En el siguiente ejemplo, los datos se agrupan por país y la función de arrastrar y soltar se puede usar para intercambiar filas entre países. Podemos pensar en el país como maestro y las otras filas como detalles.
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' }, ]);Ejemplo completo (arrastrar y agrupar filas)
https://www.ag-grid.com/examples/row-dragging/dragging-with-row-groups/packages/vanilla/index.html