Implemented Cell Editing for Table

src/components/datatable/BodyCell.vue

@@ -88,7 +88,7 @@ export default {
             if (!this.documentEditListener) {
                 this.documentEditListener = (event) => {
                     if (this.isOutsideClicked(event)) {
-                        this.switchCellToViewMode();
+                        this.completeEdit(event, 'outside');
                     }
                 };
                 
@@ -108,27 +108,39 @@ export default {
         isOutsideClicked(event) {
             return !this.$el.contains(event.target) && !this.$el.isSameNode(event.target);
         },
-        onClick() {
+        onClick(event) {
             if (this.isEditable() && !this.editing) {
                 this.editing = true;
-
                 this.bindDocumentEditListener();
+                this.$emit('edit-init', {originalEvent: event, data: this.rowData, field: this.column.field, index: this.index});
+            }
+        },
+        completeEdit(event, type) {
+            let editEvent = {originalEvent: event, data: this.rowData, field: this.column.field, index: this.index, type: type, preventDefault: () => event.preventDefault()};
+            this.$emit('edit-complete', editEvent);
+
+            if (!event.defaultPrevented) {
+                this.switchCellToViewMode();
             }
         },
         onKeyDown(event) {
             switch (event.which) {
                 case 13:
+                    this.completeEdit(event, 'enter');
+                break;
+                
                 case 27:
                     this.switchCellToViewMode();
+                    this.$emit('edit-cancel', {originalEvent: event, data: this.rowData, field: this.column.field, index: this.index});
                 break;
 
                 case 9:
+                    this.completeEdit(event, 'tab');
+
                     if (event.shiftKey)
                         this.moveToPreviousCell(event);
                     else
                         this.moveToNextCell(event);
-
-                    this.switchCellToViewMode();
                 break;
             }
         },
@@ -202,6 +214,9 @@ export default {
             else {
                 return null;
             }
+        },
+        isEditingCellValid() {
+            return (DomHandler.find(this.$el, '.p-invalid').length === 0);
         }
     },
     computed: {

src/components/datatable/DataTable.d.ts

@@ -44,6 +44,7 @@ export declare class DataTable extends Vue {
     expandedRowGroups?: any[];
     stateStorage?: string;
     stateKey?: string;
+    editMode?: string;
     $emit(eventName: 'page', event: Event): this;
     $emit(eventName: 'sort', event: Event): this;
     $emit(eventName: 'filter', event: Event): this;
@@ -56,6 +57,9 @@ export declare class DataTable extends Vue {
     $emit(eventName: 'row-collapse', event: Event): this;
     $emit(eventName: 'rowgroup-expand', event: Event): this;
     $emit(eventName: 'rowgroup-collapse', event: Event): this;
+    $emit(eventName: 'edit-init', event: Event): this;
+    $emit(eventName: 'edit-complete', event: Event): this;
+    $emit(eventName: 'edit-cancel', event: Event): this;
     $slots: {
         header: VNode[];
         paginatorLeft: VNode[];

src/components/datatable/DataTable.vue

@@ -71,7 +71,8 @@
                                     <DTBodyCell v-if="shouldRenderBodyCell(dataToRender, col, index)" :key="col.columnKey||col.field||i" :rowData="rowData" :column="col" :index="index" :selected="isSelected(rowData)"
                                         :rowTogglerIcon="col.expander ? rowTogglerIcon(rowData): null" @row-toggle="toggleRow"
                                         @radio-change="toggleRowWithRadio" @checkbox-change="toggleRowWithCheckbox"
-                                        :rowspan="rowGroupMode === 'rowspan' ? calculateRowGroupSize(dataToRender, col, index) : null" />
+                                        :rowspan="rowGroupMode === 'rowspan' ? calculateRowGroupSize(dataToRender, col, index) : null" 
+                                        @edit-init="onEditInit" @edit-complete="onEditComplete" @edit-cancel="onEditCancel" />
                                 </template>
                             </tr>
                             <tr class="p-datatable-row-expansion" v-if="expandedRows && isRowExpanded(rowData)" :key="getRowKey(rowData, index) + '_expansion'">
@@ -303,6 +304,10 @@ export default {
         stateKey: {
             type: String,
             default: null
+        },
+        editMode: {
+            type: String,
+            default: null
         }
     },
     data() {
@@ -1557,6 +1562,15 @@ export default {
                 let headers = DomHandler.find(this.$refs.table, '.p-datatable-thead > tr > th');
                 headers.forEach((header, index) => header.style.width = widths[index] + 'px');
             }
+        },
+        onEditInit(event) {
+            this.$emit('edit-init', event);
+        },
+        onEditComplete(event) {
+            this.$emit('edit-complete', event);
+        },
+        onEditCancel(event) {
+            this.$emit('edit-cancel', event);
         }
     },
     computed: {

src/views/datatable/DataTableEditDemo.vue

@@ -10,8 +10,9 @@
 		</div>
 
 		<div class="content-section implementation">
-            <h3>Cell Editing</h3>
+            <h3>Basic Cell Editing</h3>
-			<DataTable :value="cars">
+            <p>Simple editors with v-model.</p>
+			<DataTable :value="cars1" editMode="cell">
                 <Column field="vin" header="Vin">
                     <template #editor="slotProps">
                         <InputText v-model="slotProps.data[slotProps.column.field]" />
@@ -19,7 +20,7 @@
                 </Column>
                 <Column field="year" header="Year">
                     <template #editor="slotProps">
-                        <InputText v-model="slotProps.data['year']" />
+                        <InputText v-model="slotProps.data[slotProps.column.field]" />
                     </template>
                 </Column>
                 <Column field="brand" header="Brand">
@@ -36,23 +37,128 @@
                 </Column>
                 <Column field="color" header="Color">
                     <template #editor="slotProps">
-                        <InputText v-model="slotProps.data['color']" />
+                        <InputText v-model="slotProps.data[slotProps.column.field]" />
+                    </template>
+                </Column>
+            </DataTable>
+
+            <h3>Advanced Cell Editing</h3>
+            <p>Advanced editors with validations and ability to revert values with escape key.</p>
+			<DataTable :value="cars2" editMode="cell" @edit-init="onEditInit" @edit-complete="onEditComplete" @edit-cancel="onEditCancel">
+                <Column field="vin" header="Vin">
+                    <template #editor="slotProps">
+                        <InputText :value="slotProps.data[slotProps.column.field]" @input="onEdit($event, slotProps)" />
+                    </template>
+                </Column>
+                <Column field="year" header="Year">
+                    <template #editor="slotProps">
+                        <InputText :value="slotProps.data[slotProps.column.field]" @input="onEdit($event, slotProps)" />
+                    </template>
+                </Column>
+                <Column field="brand" header="Brand">
+                    <template #editor="slotProps">
+                        <Dropdown v-model="slotProps.data['brand']" :options="brands" optionLabel="brand" optionValue="value" placeholder="Select a Brand">
+                            <template #option="optionProps">
+                                <div class="p-dropdown-car-option">
+                                    <img :alt="optionProps.option.brand" :src="'demo/images/car/' + optionProps.option.brand + '.png'" />
+                                    <span>{{optionProps.option.brand}}</span>
+                                </div>
+                            </template>
+                        </Dropdown>
+                    </template>
+                </Column>
+                <Column field="color" header="Color">
+                    <template #editor="slotProps">
+                        <InputText :value="slotProps.data[slotProps.column.field]" @input="onEdit($event, slotProps)" />
                     </template>
                 </Column>
             </DataTable>
 		</div>
-	</div>
-</template>
 
-<script>
+        <div class="content-section documentation">
+            <TabView>
+                <TabPanel header="Source">
+<CodeHighlight>
+<template v-pre>
+&lt;h3&gt;Basic Cell Editing&lt;/h3&gt;
+&lt;p&gt;Simple editors with v-model.&lt;/p&gt;
+&lt;DataTable :value="cars1" editMode="cell"&gt;
+    &lt;Column field="vin" header="Vin"&gt;
+        &lt;template #editor="slotProps"&gt;
+            &lt;InputText v-model="slotProps.data[slotProps.column.field]" /&gt;
+        &lt;/template&gt;
+    &lt;/Column&gt;
+    &lt;Column field="year" header="Year"&gt;
+        &lt;template #editor="slotProps"&gt;
+            &lt;InputText v-model="slotProps.data[slotProps.column.field]" /&gt;
+        &lt;/template&gt;
+    &lt;/Column&gt;
+    &lt;Column field="brand" header="Brand"&gt;
+        &lt;template #editor="slotProps"&gt;
+            &lt;Dropdown v-model="slotProps.data['brand']" :options="brands" optionLabel="brand" optionValue="value" placeholder="Select a Brand"&gt;
+                &lt;template #option="optionProps"&gt;
+                    &lt;div class="p-dropdown-car-option"&gt;
+                        &lt;img :alt="optionProps.option.brand" :src="'demo/images/car/' + optionProps.option.brand + '.png'" /&gt;
+                        &lt;span&gt;&#123;&#123;optionProps.option.brand&#125;&#125;&lt;/span&gt;
+                    &lt;/div&gt;
+                &lt;/template&gt;
+            &lt;/Dropdown&gt;
+        &lt;/template&gt;
+    &lt;/Column&gt;
+    &lt;Column field="color" header="Color"&gt;
+        &lt;template #editor="slotProps"&gt;
+            &lt;InputText v-model="slotProps.data[slotProps.column.field]" /&gt;
+        &lt;/template&gt;
+    &lt;/Column&gt;
+&lt;/DataTable&gt;
+
+&lt;h3&gt;Advanced Cell Editing&lt;/h3&gt;
+&lt;p&gt;Advanced editors with validations and ability to revert values with escape key.&lt;/p&gt;
+&lt;DataTable :value="cars2" editMode="cell" @edit-init="onEditInit" @edit-complete="onEditComplete" @edit-cancel="onEditCancel"&gt;
+    &lt;Column field="vin" header="Vin"&gt;
+        &lt;template #editor="slotProps"&gt;
+            &lt;InputText :value="slotProps.data[slotProps.column.field]" @input="onEdit($event, slotProps)" /&gt;
+        &lt;/template&gt;
+    &lt;/Column&gt;
+    &lt;Column field="year" header="Year"&gt;
+        &lt;template #editor="slotProps"&gt;
+            &lt;InputText :value="slotProps.data[slotProps.column.field]" @input="onEdit($event, slotProps)" /&gt;
+        &lt;/template&gt;
+    &lt;/Column&gt;
+    &lt;Column field="brand" header="Brand"&gt;
+        &lt;template #editor="slotProps"&gt;
+            &lt;Dropdown v-model="slotProps.data['brand']" :options="brands" optionLabel="brand" optionValue="value" placeholder="Select a Brand"&gt;
+                &lt;template #option="optionProps"&gt;
+                    &lt;div class="p-dropdown-car-option"&gt;
+                        &lt;img :alt="optionProps.option.brand" :src="'demo/images/car/' + optionProps.option.brand + '.png'" /&gt;
+                        &lt;span&gt;&#123;&#123;optionProps.option.brand&#125;&#125;&lt;/span&gt;
+                    &lt;/div&gt;
+                &lt;/template&gt;
+            &lt;/Dropdown&gt;
+        &lt;/template&gt;
+    &lt;/Column&gt;
+    &lt;Column field="color" header="Color"&gt;
+        &lt;template #editor="slotProps"&gt;
+            &lt;InputText :value="slotProps.data[slotProps.column.field]" @input="onEdit($event, slotProps)" /&gt;
+        &lt;/template&gt;
+    &lt;/Column&gt;
+&lt;/DataTable&gt;
+</template>
+</CodeHighlight>
+
+<CodeHighlight lang="javascript">
 import CarService from '../../service/CarService';
 import DataTableSubMenu from './DataTableSubMenu';
+import Vue from 'vue';
 
 export default {
     data() {
         return {
-            columns: null,
+            cars1: null,
-            cars: null,
+            cars2: null,
+            editingCar: null,
+            editingCarIndex: null,
+            originalCar: null,
             brands: [
                 {brand: 'Audi', value: 'Audi'},
                 {brand: 'BMW', value: 'BMW'},
@@ -69,16 +175,157 @@ export default {
     carService: null,
     created() {
         this.carService = new CarService();
+    },
+    methods: {
+        onEditInit(event) {
+            this.editingCarIndex = event.index;
+            this.editingCar = {...event.data};      //update on input
+            this.originalCar = {...event.data};     //revert with escape key
+        },
+        onEditComplete(event) {
+            switch (event.field) {
+                case 'year':
+                    if (this.isPositiveInteger(this.editingCar.year)) {
+                        Vue.set(this.cars2, this.editingCarIndex, this.editingCar);
+                    }
+                    else {
+                        this.$toast.add({severity:'error', summary: 'Validation Failed', detail:'Year must be a number', life: 3000});
+                        event.preventDefault();
+                    }
+                break;
 
-        this.columns = [
+                default:
-            {field: 'vin', header: 'Vin'},
+                    if (this.editingCar[event.field].trim().length > 0) {
-            {field: 'year', header: 'Year'},
+                        Vue.set(this.cars2, this.editingCarIndex, this.editingCar);
-            {field: 'brand', header: 'Brand'},
+                    }
-            {field: 'color', header: 'Color'}
+                    else {
-        ];
+                        this.$toast.add({severity:'error', summary: 'Validation Failed', detail: event.field + ' is required', life: 3000});
+                        event.preventDefault();
+                    }
+                break;
+            }
+        },
+        clearEditorState() {
+            this.editingCar = null;
+            this.originalCar = null;
+        },
+        onEdit(newValue, props) {
+            this.editingCar[props.column.field] = newValue;
+        },
+        onEditCancel(event) {
+            Vue.set(this.cars2, event.index, this.originalCar);
+            this.editingCar = null;
+        },
+        isPositiveInteger(val) {
+            let str = String(val);
+            str = str.trim();
+            if (!str) {
+                return false;
+            }
+            str = str.replace(/^0+/, "") || "0";
+            var n = Math.floor(Number(str));
+            return n !== Infinity &amp;&amp; String(n) === str &amp;&amp; n >= 0;
+        }
     },
     mounted() {
-        this.carService.getCarsSmall().then(data => this.cars = data);
+        this.carService.getCarsSmall().then(data => this.cars1 = data);
+        this.carService.getCarsSmall().then(data => this.cars2 = data);
+    },
+    components: {
+        'DataTableSubMenu': DataTableSubMenu
+    }
+}
+</CodeHighlight>
+                </TabPanel>
+            </TabView>
+        </div>
+	</div>
+</template>
+
+<script>
+import CarService from '../../service/CarService';
+import DataTableSubMenu from './DataTableSubMenu';
+import Vue from 'vue';
+
+export default {
+    data() {
+        return {
+            cars1: null,
+            cars2: null,
+            editingCar: null,
+            editingCarIndex: null,
+            originalCar: null,
+            brands: [
+                {brand: 'Audi', value: 'Audi'},
+                {brand: 'BMW', value: 'BMW'},
+                {brand: 'Fiat', value: 'Fiat'},
+                {brand: 'Honda', value: 'Honda'},
+                {brand: 'Jaguar', value: 'Jaguar'},
+                {brand: 'Mercedes', value: 'Mercedes'},
+                {brand: 'Renault', value: 'Renault'},
+                {brand: 'Volkswagen', value: 'Volkswagen'},
+                {brand: 'Volvo', value: 'Volvo'}
+            ]
+        }
+    },
+    carService: null,
+    created() {
+        this.carService = new CarService();
+    },
+    methods: {
+        onEditInit(event) {
+            this.editingCarIndex = event.index;
+            this.editingCar = {...event.data};      //update on input
+            this.originalCar = {...event.data};     //revert with escape key
+        },
+        onEditComplete(event) {
+            switch (event.field) {
+                case 'year':
+                    if (this.isPositiveInteger(this.editingCar.year)) {
+                        Vue.set(this.cars2, this.editingCarIndex, this.editingCar);
+                    }
+                    else {
+                        this.$toast.add({severity:'error', summary: 'Validation Failed', detail:'Year must be a number', life: 3000});
+                        event.preventDefault();
+                    }
+                break;
+
+                default:
+                    if (this.editingCar[event.field].trim().length > 0) {
+                        Vue.set(this.cars2, this.editingCarIndex, this.editingCar);
+                    }
+                    else {
+                        this.$toast.add({severity:'error', summary: 'Validation Failed', detail: event.field + ' is required', life: 3000});
+                        event.preventDefault();
+                    }
+                break;
+            }
+        },
+        clearEditorState() {
+            this.editingCar = null;
+            this.originalCar = null;
+        },
+        onEdit(newValue, props) {
+            this.editingCar[props.column.field] = newValue;
+        },
+        onEditCancel(event) {
+            Vue.set(this.cars2, event.index, this.originalCar);
+            this.editingCar = null;
+        },
+        isPositiveInteger(val) {
+            let str = String(val);
+            str = str.trim();
+            if (!str) {
+                return false;
+            }
+            str = str.replace(/^0+/, "") || "0";
+            var n = Math.floor(Number(str));
+            return n !== Infinity && String(n) === str && n >= 0;
+        }
+    },
+    mounted() {
+        this.carService.getCarsSmall().then(data => this.cars1 = data);
+        this.carService.getCarsSmall().then(data => this.cars2 = data);
     },
     components: {
         'DataTableSubMenu': DataTableSubMenu