LiveLoveApp logo
ServicesArchitecture ReviewWorkshopsCase StudiesBlogContact

Provided Cell Editors

AG Grid Provided Cell Editors

AG Grid provides the following cell editors:

  • Text editor
  • Large text editor
  • Date editor
  • Select editor
  • Rich select editor (enterprise only)
  • The text cell editor is the default.
  • Use the cellEditor column definition property to specify a provided or custom cell editor.

We can specify the provided large text cell editor.

export default function Grid() {
  const [columnDefs] = useState<ColDef<RowData>[]>([
    {
      headerName: 'Account No',
      field: 'account.accountNumber',
      editable: true,
      cellEditor: 'agLargeTextCellEditor',
    },
  ]);
}

We can specify the provided select cell editor editor.

export default function Grid() {
  const [columnDefs] = useState<ColDef<RowData>[]>([
    {
      headerName: 'Account No',
      field: 'account.accountNumber',
      editable: true,
      cellEditor: 'agSelectCellEditor',
    },
  ]);
}

Exercise

  1. Open the exercise on Stackblitz.
  2. Enable cell editing for the Customer Name column.
  3. Enable cell editing for the Account No column and use the agLargeTextCellEditor.

Solution

export default function Grid() {
  const [columnDefs] = useState<ColDef<RowData>[]>([
    {
      headerName: 'Customer Name',
      field: 'customer.name',
      editable: true,
    },
    {
      headerName: 'Account No',
      field: 'account.accountNumber',
      editable: true,
      cellEditor: 'agLargeTextCellEditor',
      cellEditorPopup: true,
    },
  ]);
}

See solution on Stackblitz