Intento diseñar una celda editada aprovechando onCellValueChanged en los accesorios colDef , pero no funciona como se esperaba. Todavía soy nuevo en el uso de Ag Grid y no se documenta nada sobre el estilo de una celda editada o tal vez me lo perdí.
El código se ve así
const defaultColDef = useMemo<ColDef>(() => { return { resizable: true, headerComponent: "customHeader", onCellValueChanged: ({ colDef, api, node, column, columnApi }) => { colDef.cellClass = p => { return (p.colDef.field ?? p.colDef.colId) === (colDef.field ?? colDef.colId) && p.rowIndex === node?.rowIndex ? "dirty-cell" : ""; }; api.refreshCells({ rowNodes: [node!], force: true }); } }; }, []); <AgGridReact ref={gridRef} defaultColDef={defaultColDef} onCellValueChanged={onCellChange} rowData={rows} columnDefs={columns} getRowId={param => param.data.id ?? param.data.virtual_id} components={{ customHeader: CustomHeaderCell }} onCellDoubleClicked={onCellDoubleClicked} onCellKeyDown={onCellKeyDown} rowClassRules={rowClassRules} gridOptions={{ tooltipShowDelay: 0 }} onDragStopped={onDragStopped} />Espero que mi pregunta sea clara ! Gracias
cellStyle en mi código. Compara el valor antiguo y el nuevo, si se cambia el valor, el estilo css se aplica a esa celda
onCellValueChanged = (params) => { if (params.oldValue !== params.newValue) { params.column.colDef.cellStyle = (value) => { return value.rowIndex.toString() === params.node.id ? { 'backgroundColor': '#9ac1fc' } : {} }; params.api.refreshCells({ force: true, columns: [params.column.getId()], rowNodes: [params.node] }); } }El código está en JS y es posible que deba convertirlo en TypeScript, si ocurriera algún error de sintaxis.