LiveLoveApp logo
ServicesArchitecture ReviewWorkshopsCase StudiesBlogContact

Cell Editing

Goals

  • Learn to use the provided cell editors
  • Learn to create a custom cell editor using React

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();