Editable Cells

Search…
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:
1
{
2
   editableColumns:['text','text2','checkbox']
3
}

Copied!
Then use scoped slots to build the logic:
1
 <v-client-table :columns="client.columns" :options="client.options" v-model="client.data">
2
    // update text on the fly
3
    <input type="text" slot="text" slot-scope="{row, update}" v-model="row.text" @input="update">
4
    // update a checkbox
5
    <input type="checkbox" slot="checkbox" slot-scope="{row, update}" v-model="row.checkbox" @input="update">
6
    
7
    // update text on submit + toggle editable state + revert to original value on cancel
8
    <div slot="text2" slot-scope="{row, update, setEditing, isEditing, revertValue}">
9
     <span @click="setEditing(true)" v-if="!isEditing()">
10
         {{row.text2}}
11
     </span>
12
     <span v-else>
13
     <input type="text" v-model="row.text2">
14
        <button type="button" @click="update(row.text2); setEditing(false)">Submit</button>
15
        <button type="button" @click="revertValue(); setEditing(false)">Cancel</button>        
16
      </span>  
17
    </div>           
18
</v-client-table>
Copied!
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:
 {row, column, oldVal, newVal}
​
Filtering Algorithm
Server Table
Last modified 2yr ago
Copy link