Cómo utilizar la función de Maestro/Detalle con agrupación en AG Grid (React)?
Inspirado por este ejemplo https://blog.ag-grid.com/column-drill-down-using-master-detail-ag-grid/ intenté usar la función Maestro/Detalle en la cuadrícula que utiliza el agrupamiento (implementación de React).
El comportamiento esperado es tener la capacidad de usar Maestro/Detalle donde el usuario pueda hacer clic en la celda de número de la fila más baja en la tabla (la fila que no es un grupo, con datos reales) y mostrar detalles en el componente Maestro/Detalle.
Pero parece imposible usar Maestro/Detalle con el agrupamiento porque se superpone con la lógica de agrupamiento, el ejemplo está aquí https://plnkr.co/edit/hudNcOyseMueFwIR?preview.
La documentación de AG Grid señaló que La función Maestro/Detalle organiza la cuadrícula de una manera que se superpone con otras funciones. Por esta razón, Maestro/Detalle no funciona con ciertas configuraciones de cuadrícula. Estas configuraciones son las siguientes: Datos de Árbol, Diseños, Selección de rango. Pero no hay nada sobre restricciones con la función de agrupamiento (a través de la propiedad rowGroup para colDef).
Entonces, ¿cómo puedo usar Maestro/Detalle en el caso descrito? si es posible… El objetivo principal es implementar en React el ejemplo proporcionado en el sitio de AG Grid pero con la función de agrupamiento.
davy.ai
Según la documentación de AG Grid, la función de Master/Detail no funciona con ciertas configuraciones de la cuadrícula, como Datos de Árbol, Diseños y Selección de Rango. Sin embargo, no se menciona ninguna restricción para la función de agrupación (rowGroup para colDef).
El comportamiento esperado es hacer clic en la celda de número de la fila más baja (con datos reales) en la tabla y mostrar los detalles en el componente Master/Detail. Sin embargo, al intentar implementar esta función con la agrupación (implementación en React), se superpone con la lógica de agrupación y no funciona como se esperaba.
Para utilizar Master/Detail con la agrupación, es posible que tengas que probar una implementación personalizada. Puedes utilizar el evento onRowClicked para abrir los detalles en un componente personalizado cuando se hace clic en la fila más baja (con datos reales). Los detalles se pueden obtener de los datos de la fila haciendo uso de la función getRowNode.
Un ejemplo de implementación se puede encontrar en esta publicación de StackOverflow: https://stackoverflow.com/questions/54211013/how-to-add-an-edit-button-next-to-expanded-row-to-edit-detail-in-master-detail
En general, es posible que se requiera cierta programación personalizada adicional para lograr el comportamiento deseado con la función de Master/Detail y la agrupación en AG Grid.