> For the complete documentation index, see [llms.txt](https://matanya.gitbook.io/vue-tables-2/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://matanya.gitbook.io/vue-tables-2/client-table/editable-cells.md).

# Editable Cells

Editable cells are currently supported only for the client table.

To ensure editable data is reflected on your original dataset you must use \`v-model\` instead of the \`data\` prop.

Each row in dataset must have a unique identifier. By default its key is set to \`id\`. Use the \`uniqueKey\` option if your dataset has a different identifier.

As always examples work best to illustrate the syntax:

Start by declaring the column(s) you wish to be editable using the \`editableColumns\` option:

```javascript
{
   editableColumns:['text','text2','checkbox']
}
```

Then use scoped slots to build the logic:

```markup
 <v-client-table :columns="client.columns" :options="client.options" v-model="client.data">
    // update text on the fly
    <input type="text" slot="text" slot-scope="{row, update}" v-model="row.text" @input="update">
    // update a checkbox
    <input type="checkbox" slot="checkbox" slot-scope="{row, update}" v-model="row.checkbox" @input="update">
    
    // update text on submit + toggle editable state + revert to original value on cancel
    <div slot="text2" slot-scope="{row, update, setEditing, isEditing, revertValue}">
     <span @click="setEditing(true)" v-if="!isEditing()">
         {{row.text2}}
     </span>
     <span v-else>
     <input type="text" v-model="row.text2">
        <button type="button" @click="update(row.text2); setEditing(false)">Submit</button>
        <button type="button" @click="revertValue(); setEditing(false)">Cancel</button>        
      </span>  
    </div>           
</v-client-table>
```

In addition to the \`input\` event which is responsible - in conjunction with \`v-model\` - for updating the dataset, an additional \`update\` event is triggered with the following payload:
&#x20;`{row, column, oldVal, newVal}`