How to cancel all chnages in row

Xkoder FX 0
Viewed 32

I have a ag grid table with edit enabled on each cell. I want to reset all changes the user has made on specfic button on click.

ag-grid-react ag-grid
1 Answers

To achieve this we need to keep our original data separate from what the user will edit - this is done by making a deep copy:

 const originalData = [{ make: 'Toyota', model: 'Celica', price: 35000},
                       { make: 'Ford', model: 'Mondeo', price: 32000 },
                       { make: 'Porsche', model: 'Boxster', price: 72000 },
                      ];

 let copyData = originalData.map((d) => ({ ...d }));

After the cells have been edited - in our function we remake our deep copy then call SetRowData on the deep copy:

 const resetChanges = () => {
 copyData = originalData.map((d) => ({ ...d }));
 gridDataRef.current.gridApi.setRowData(copyData);
};

Heres a live example: https://plnkr.co/edit/1GpqhekV2A5XePSn?open=index.jsx

ChefNoName0
Related