Cell Editing

Enabling Cell Editing

• Enable via the editable property on the column definition.
• Set the editable to a boolean to enable/disable editing.
• Set the editable to a function to determine if editing is enabled.
• Enable via the Grid API.

Enable cell editing using the column definition.

export default function Grid() {
  const [columnDefs] = useState<ColDef<RowData>[]>([
    {
      colId: 'name',
      headerName: 'Customer Name',
      field: 'customer.name',
      editable: true,
    },
  ]);
}

Enable cell editing using the Grid API.

gridApi.startEditingCell({
  rowIndex: 0,
  colKey: 'name',
});

gridApi.stopEditing();