diff --git a/src/views/datatable/DataTableEditDemo.vue b/src/views/datatable/DataTableEditDemo.vue
index bf8f1b61d..9b889c0dd 100644
--- a/src/views/datatable/DataTableEditDemo.vue
+++ b/src/views/datatable/DataTableEditDemo.vue
@@ -45,63 +45,13 @@
             </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" @cell-edit-init="onCellEditInit" @cell-edit-complete="onCellEditComplete" @cell-edit-cancel="onCellEditCancel">
-                <Column field="vin" header="Vin">
+            <p>Custom implementation with validations, dynamic columns and ability to revert values with the escape key.</p>
+			<DataTable :value="cars2" editMode="cell" @cell-edit-complete="onCellEditComplete">
+                <Column v-for="col of columns" :field="col.field" :header="col.header" :key="col.field">
                     <template #editor="slotProps">
-                        <InputText :value="slotProps.data[slotProps.column.field]" @input="onCellEdit($event)" />
+                        <InputText :value="slotProps.data[slotProps.column.field]" @input="onCellEdit($event, slotProps)" />
                     </template>
                 </Column>
-                <Column field="year" header="Year">
-                    <template #editor="slotProps">
-                        <InputText :value="slotProps.data[slotProps.column.field]" @input="onCellEdit($event)" />
-                    </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="onCellEdit($event)" />
-                    </template>
-                </Column>
-            </DataTable>
-
-            <h3>Row Editing</h3>
-			<DataTable :value="cars3" editMode="row" dataKey="vin" :editingRows.sync="editingRows">
-                <Column field="vin" header="Vin"></Column>
-                <Column field="year" header="Year">
-                    <template #editor="slotProps">
-                        <InputText v-model="slotProps.data[slotProps.column.field]" />
-                    </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 v-model="slotProps.data[slotProps.column.field]" />
-                    </template>
-                </Column>
-                <Column :rowEditor="true" headerStyle="width:6em" bodyStyle="text-align:center"></Column>
             </DataTable>
 		</div>
 
@@ -134,10 +84,8 @@ export default {
             cars1: null,
             cars2: null,
             cars3: null,
-            editingCell: null,
-            editingCellIndex: null,
-            originalCell: null,
-            editingRows: null,
+            editingRows: {},
+            columns: null,
             brands: [
                 {brand: 'Audi', value: 'Audi'},
                 {brand: 'BMW', value: 'BMW'},
@@ -154,53 +102,44 @@ export default {
     carService: null,
     created() {
         this.carService = new CarService();
+
+        this.columns = [
+            {field: 'vin', header: 'Vin'},
+            {field: 'year', header: 'Year'},
+            {field: 'brand', header: 'Brand'},
+            {field: 'color', header: 'Color'}
+        ];
     },
     methods: {
-        onCellEditInit(event) {
-            this.editingRowIndex = event.index;
-            this.editingCellValue = event.data[event.field];       //update on input
-            this.originalCellValue = event.data[event.field];      //revert with escape key
-        },
         onCellEditComplete(event) {
+            if (!this.editingRows[event.index]) {
+                return;
+            }
+            
+            const editingCellValue = this.editingRows[event.index][event.field];
+
             switch (event.field) {
                 case 'year':
-                    if (this.isPositiveInteger(this.editingCellValue)) {
-                        let editingRow = {...this.cars2[this.editingRowIndex]};
-                        editingRow.year = parseInt(this.editingCellValue);
-                        Vue.set(this.cars2, this.editingRowIndex, editingRow);
-                        this.clearEditState();
-                    }
-                    else {
-                        this.$toast.add({severity:'error', summary: 'Validation Failed', detail:'Year must be a number', life: 3000});
+                    if (this.isPositiveInteger(editingCellValue))
+                        Vue.set(this.cars2, event.index, this.editingRows[event.index]);
+                    else
                         event.preventDefault();
-                    }
                 break;
 
                 default:
-                    if (this.editingCellValue.trim().length > 0) {
-                        let editingRow = {...this.cars2[this.editingRowIndex]};
-                        editingRow[event.field] = this.editingCellValue;
-                        Vue.set(this.cars2, this.editingRowIndex, editingRow);
-                        this.clearEditState();
-                    }
-                    else {
-                        this.$toast.add({severity:'error', summary: 'Validation Failed', detail: event.field + ' is required', life: 3000});
+                    if (editingCellValue.trim().length > 0)
+                        Vue.set(this.cars2, event.index, this.editingRows[event.index]);
+                    else
                         event.preventDefault();
-                    }
                 break;
             }
         },
-        onCellEditCancel(event) {
-            
-            this.clearEditState();
-        },
-        onCellEdit(newValue) {
-            this.editingCellValue = newValue;
-        },
-        clearEditState() {
-            this.editingCellValue = null;
-            this.editingCellValue = null;
-            this.originalCellValue = null;
+        onCellEdit(newValue, props) {
+            if (!this.editingRows[props.index]) {
+                this.editingRows[props.index] = {...props.data};
+            }
+
+            this.editingRows[props.index][props.column.field] = newValue;
         },
         isPositiveInteger(val) {
             let str = String(val);