Estoy tratando de agregar dinámicamente una nueva fila en el evento de clic de botón, en ag-grid en mi página ReactJS.
El código a continuación funciona para mí, cuando tengo el número fijo de columnas conocidas en tiempo de diseño.
let row ={ products1: "a", products2: "b", products3: "c" } gridApi.updateRowData(add: [row])Pero también necesito que esto funcione, si el número de columnas es variable y solo se conoce en tiempo de ejecución. ¿No está seguro de si esto es factible en ReactJS/ag-grid?
¿Necesito usar la función de mapa de matriz aquí? Hasta ahora, he intentado lo siguiente, pero da un error de sintaxis.
const rowArray = [] for(int index=0; index < myProductColumnsArrAtRunTime.length;index++) { rowArray.map((myProductColumnsArrAtRunTime[i], myProductColumnsArrAtRunTime[i].category) => {myProductColumnsArrAtRunTime[i]}: {myProductColumnsArrAtRunTime[i].category}); } gridApi.updateRowData(add: [rowArray])Si el número de columnas cambia después del estado inicial de la cuadrícula, primero debe actualizar las definiciones de las columnas. Consulte la documentación para actualizar la definición de columna.
Más tarde, el botón 'Agregar fila' debe agregar nuevos datos de fila en función del nuevo conjunto de columnas. Esto debe hacerse manualmente en función de las diferentes estructuras de columnas que tenga.
Para agregar dinámicamente una nueva fila a la cuadrícula con columnas variables, use el siguiente código
Nota: aquí he usado funciones de la biblioteca lodash que comienza desde _
// GET GRID colDefs const colDefs = gridApi.getColumnDefs(); const newRowObj = {}; // LOOP OVER THE `colDefs` AND SET THE `null` DATA FOR EACH FIELD FOR THE NEWLY ADDED ROW _.forEach(colDefs, (eachColDef) => { const { field } = eachColDef; _.set(newRowObj, field, null); }); // ADD THE NEW ROW TO THE GRID gridApi.updateRowData({ add: [newRowObj], addIndex: 0, // YOU CAN PASS THE INDEX AT WHICH THE NEW ROW IS TO BE ADDED });