Undo/Redo Edits

Editing data usually leads to at least a few mistakes. Luckily, ag-Grid provides an easy way to undo and redo edits.

To enable undo and redo, we just need to add two props to our AgGridReact component:

// App.js
// AgGridReact component props
undoRedoCellEditing={true}
undoRedoCellEditingLimit={5}

Note that the default for undoRedoCellEditing is 10, so this prop is actually optional.

The following keyboard shortcuts are available when undo/redo is enabled:

• Ctrl+Z (PC) / CMD+Z (Mac): will undo the last cell edit(s).
• Ctrl+Y (PC) / CMD+SHIFT+Z (Mac): will redo the last undo.

Note: This undo/redo feature is designed to be a recovery mechanism for user editing mistakes. Performing grid operations that change the row or column order such as sorting, filtering, or grouping, will clear the undo/redo stacks.

Great! Let's learn about the value change event and the editing API next.