Using ag-Grid with React: Cell Editing

Provided Cell Editors


There are a number of provided cell editors that come standard with ag-Grid:

  • agTextCellEditor: Simple text editor that uses a standard HTML input. This is the default.
  • agLargeTextCellEditor: A text popup for inputting larger, multi-line text.
  • agPopupTextCellEditor: Same as 'text' but as popup.
  • agSelectCellEditor: Simple editor that uses a standard HTML select.
  • agPopupSelectCellEditor: Same as 'select' but as popup.

We can change the cell editor for a column by setting a cellEditor property in its column definition:

colDef.cellEditor = 'agSelectCellEditor';

In the video, here's what we end up doing for the account name column to turn it into a select dropdown:

// App.js
// Account name column definition
colDef.cellEditor = 'agSelectCellEditor';
colDef.cellEditorParams = {
    values: ["Checking Account", "Money Market Account", "Personal Loan Account", "Home Loan Account", "Credit Card Account", "Auto Loan Account", "Savings Account", "Investment Account"]

Up next, let's learn about undoing and redoing edits in our cells.


I finished! On to the next chapter