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.