Vue Data GridCell Editing

Enable Editing

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

<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 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.

Conditional Editing

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

<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 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 has been added to highlight editable cells using the same logic as the editable callback.

Editing Events

Cell editing results in the following events.