---
product: "AG Grid"
title: "Cell Editing"
description: "To enable Cell Editing for a Column use the editable property on the Column Definition."
framework: vue
version: "36.2.0"
related:
    - title: "Start / Stop Editing"
      url: "https://www.ag-grid.com/archive/36.2.0/vue-data-grid/cell-editing-start-stop/"
    - title: "Parsing Values"
      url: "https://www.ag-grid.com/archive/36.2.0/vue-data-grid/value-parsers/"
    - title: "Saving Values"
      url: "https://www.ag-grid.com/archive/36.2.0/vue-data-grid/value-setters/"
    - title: "Edit Components"
      url: "https://www.ag-grid.com/archive/36.2.0/vue-data-grid/cell-editors/"
    - title: "Provided Cell Editors"
      url: "https://www.ag-grid.com/archive/36.2.0/vue-data-grid/provided-cell-editors/"
    - title: "Undo / Redo Edits"
      url: "https://www.ag-grid.com/archive/36.2.0/vue-data-grid/undo-redo-edits/"
    - title: "Full Row"
      url: "https://www.ag-grid.com/archive/36.2.0/vue-data-grid/cell-editing-full-row/"
    - title: "Validation"
      url: "https://www.ag-grid.com/archive/36.2.0/vue-data-grid/cell-editing-validation/"
    - title: "Batch Editing"
      url: "https://www.ag-grid.com/archive/36.2.0/vue-data-grid/cell-editing-batch/"
llms: "https://www.ag-grid.com/archive/36.2.0/llms.txt"
---

# Cell Editing

## Enable Editing

To enable Cell Editing for a Column use the `editable` property on the Column Definition.

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `editable` | `boolean \| EditableCallback` |  |  |  |

```ts
<ag-grid-vue
    :columnDefs="columnDefs"
    /* other grid options ... */>
</ag-grid-vue>

this.columnDefs = [
    {
        field: 'athlete',
        // enables editing
        editable: true
    }
];
```

By default, the grid uses [Cell Data Types](https://www.ag-grid.com/archive/36.2.0/vue-data-grid/cell-data-types/) to provide different editors based on the type of each column. For example, string columns will use a text input, number columns will use a numeric input.

The example below shows editing enabled on all columns by setting `editable=true` on the `defaultColDef`.

#### Simple Cell Editing

```ts
import {
  createApp,
  defineComponent,
  onBeforeMount,
  ref,
  shallowRef,
} from "vue";
import { AgGridVue } from "ag-grid-vue3";
import {
  ClientSideRowModelApiModule,
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  GridApi,
  GridOptions,
  GridReadyEvent,
  ModuleRegistry,
  NumberEditorModule,
  TextEditorModule,
  enableDevValidations,
} from "ag-grid-community";
import { IOlympicData } from "./interfaces";

if (process.env.NODE_ENV !== "production") {
  // Enable extended validations only for development
  enableDevValidations();
}

ModuleRegistry.registerModules([
  NumberEditorModule,
  TextEditorModule,
  ClientSideRowModelApiModule,
  ClientSideRowModelModule,
]);

const VueExample = defineComponent({
  template: `
        <div style="height: 100%">
                <ag-grid-vue
      style="width: 100%; height: 100%;"
      @grid-ready="onGridReady"
      :columnDefs="columnDefs"
      :defaultColDef="defaultColDef"
      v-model="rowData"></ag-grid-vue>
        </div>
    `,
  components: {
    "ag-grid-vue": AgGridVue,
  },
  setup(props) {
    const gridApi = shallowRef<GridApi<IOlympicData> | null>(null);
    const columnDefs = ref<ColDef[]>([
      { field: "athlete" },
      { field: "age" },
      { field: "country" },
      { field: "year" },
      { field: "total" },
    ]);
    const defaultColDef = ref<ColDef>({
      editable: true,
    });
    const rowData = ref<IOlympicData[]>(null);

    const onGridReady = (params: GridReadyEvent) => {
      gridApi.value = params.api;

      const updateData = (data) => (rowData.value = data);

      fetch("https://www.ag-grid.com/example-assets/olympic-winners.json")
        .then((resp) => resp.json())
        .then((data) => updateData(data));
    };

    return {
      gridApi,
      columnDefs,
      defaultColDef,
      rowData,
      onGridReady,
    };
  },
});

const app = createApp(VueExample);
app.mount("#app");
```

[Live example: Simple Cell Editing](https://www.ag-grid.com/archive/36.2.0/examples/cell-editing/simple-editing/vue3/)

## Conditional Editing

To dynamically determine which cells are editable, a callback function can be supplied to the `editable` property on the Column Definition:

```ts
<ag-grid-vue
    :columnDefs="columnDefs"
    /* other grid options ... */>
</ag-grid-vue>

this.columnDefs = [
    {
        field: 'athlete',
        // conditionally enables editing for data for 2012
        editable: (params) => params.data.year == 2012
    }
];
```

In the snippet above, **Athlete** cells will be editable on rows where the **Year** is `2012`.

This is demonstrated in the following example, note that:

- An `editable` callback is added to the **Athlete** and **Age** columns to control which cells are editable based on the selected **Year**.
- A custom `editableColumn` [Column Type](https://www.ag-grid.com/archive/36.2.0/vue-data-grid/column-definitions/#default-column-definitions) is used to avoid duplication of the callback for **Athlete** and **Age**.
- Buttons are provided to change the **Year** used by the `editable` callback function to control which cells are editable.
- A blue [Cell Style](https://www.ag-grid.com/archive/36.2.0/vue-data-grid/cell-styles/) has been added to highlight editable cells using the same logic as the `editable` callback.

#### Conditional Cell Editing

```ts
import {
  createApp,
  defineComponent,
  onBeforeMount,
  ref,
  shallowRef,
} from "vue";
import { AgGridVue } from "ag-grid-vue3";
import "./styles.css";
import {
  CellClassParams,
  CellStyleModule,
  ClientSideRowModelApiModule,
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  ColTypeDefs,
  EditableCallbackParams,
  GridApi,
  GridOptions,
  GridReadyEvent,
  ModuleRegistry,
  NumberEditorModule,
  RowApiModule,
  TextEditorModule,
  enableDevValidations,
} from "ag-grid-community";
import { IOlympicData } from "./interfaces";

if (process.env.NODE_ENV !== "production") {
  // Enable extended validations only for development
  enableDevValidations();
}

ModuleRegistry.registerModules([
  RowApiModule,
  NumberEditorModule,
  TextEditorModule,
  CellStyleModule,
  ClientSideRowModelApiModule,
  ClientSideRowModelModule,
]);

let editableYear = 2012;

function isCellEditable(params: EditableCallbackParams | CellClassParams) {
  return params.data.year === editableYear;
}

const VueExample = defineComponent({
  template: `
        <div style="height: 100%">
                <div class="example-wrapper">
      <div style="margin-bottom: 5px">
        <button style="font-size: 12px" v-on:click="setEditableYear(2008)">Enable Editing for 2008</button>
        <button style="font-size: 12px" v-on:click="setEditableYear(2012)">Enable Editing for 2012</button>
      </div>
      <ag-grid-vue
        style="width: 100%; height: 100%;"
        @grid-ready="onGridReady"
        :columnDefs="columnDefs"
        :columnTypes="columnTypes"
        v-model="rowData"></ag-grid-vue>
      </div>
        </div>
    `,
  components: {
    "ag-grid-vue": AgGridVue,
  },
  setup(props) {
    const gridApi = shallowRef<GridApi<IOlympicData> | null>(null);
    const columnDefs = ref<ColDef[]>([
      { field: "athlete", type: "editableColumn" },
      { field: "age", type: "editableColumn" },
      { field: "year" },
      { field: "country" },
      { field: "sport" },
      { field: "total" },
    ]);
    const columnTypes = ref<ColTypeDefs>({
      editableColumn: {
        editable: (params: EditableCallbackParams<IOlympicData>) => {
          return isCellEditable(params);
        },
        cellStyle: (params: CellClassParams<IOlympicData>) => {
          if (isCellEditable(params)) {
            return { backgroundColor: "#2244cc44" };
          }
        },
      },
    });
    const rowData = ref<IOlympicData[]>(null);

    function setEditableYear(year: number) {
      editableYear = year;
      // Redraw to re-apply the new cell style
      gridApi.value!.redrawRows();
    }
    const onGridReady = (params: GridReadyEvent) => {
      gridApi.value = params.api;

      const updateData = (data) => (rowData.value = data);

      fetch("https://www.ag-grid.com/example-assets/olympic-winners.json")
        .then((resp) => resp.json())
        .then((data) => updateData(data));
    };

    return {
      gridApi,
      columnDefs,
      columnTypes,
      rowData,
      onGridReady,
      setEditableYear,
    };
  },
});

const app = createApp(VueExample);
app.mount("#app");
```

[Live example: Conditional Cell Editing](https://www.ag-grid.com/archive/36.2.0/examples/cell-editing/conditional-editing/vue3/)

## Two Way Binding

By default, `:rowData` is a **one-way binding**: data flows into the grid, but changes made within the grid (e.g. via cell editing) will **not** propagate back to the parent component's `rowData` variable.

To have row data changes flow back up from the grid to the parent component, use `v-model` instead of `:rowData`.

For example:

```jsx
<template>
    <ag-grid-vue style="width: 500px; height: 500px;"
                 @grid-ready="onGridReady"
                 :columnDefs="columnDefs"
                 v-model="rowData">
    </ag-grid-vue>
</template>
```

> **Note**
>
> `v-model` is only possible when `ClientSideRowModel` is used, and either the `AllCommunityModule` or the `ClientSideRowModelApiModule` module is registered.

## Editing Events

Cell editing results in the following events.

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `cellValueChanged` | `CellValueChangedEvent` |  |  |  |
| `cellEditRequest` | `CellEditRequestEvent` |  |  |  |
| `rowValueChanged` | `RowValueChangedEvent` |  |  |  |
| `cellEditingStarted` | `CellEditingStartedEvent` |  |  |  |
| `cellEditingStopped` | `CellEditingStoppedEvent` |  |  |  |
| `rowEditingStarted` | `RowEditingStartedEvent` |  |  |  |
| `rowEditingStopped` | `RowEditingStoppedEvent` |  |  |  |

## Row Grouping and Cell Editing

For cell editing with row grouping see [Row Grouping - Editing Groups](https://www.ag-grid.com/archive/36.2.0/vue-data-grid/grouping-edit/)