diff --git a/dev/examples/cell-edit.vue b/dev/examples/cell-edit.vue
index ba3b5e3..89aeaa4 100644
--- a/dev/examples/cell-edit.vue
+++ b/dev/examples/cell-edit.vue
@@ -19,8 +19,8 @@
 </template>
 
 <script>
-import BEditableTable from '@/b-editable-table.vue'
-import { BButton } from 'bootstrap-vue'
+import BEditableTable from "@/b-editable-table.vue";
+import { BButton } from "bootstrap-vue";
 export default {
   components: {
     BEditableTable,
@@ -29,106 +29,108 @@ export default {
     return {
       fields: [
         {
-          key: 'name',
-          label: 'Name',
-          type: 'text',
+          key: "name",
+          label: "Name",
+          type: "text",
           editable: true,
-          placeholder: 'Enter Name...',
-          class: 'name-col',
+          placeholder: "Enter Name...",
+          class: "name-col",
         },
         {
-          key: 'department',
-          label: 'Department',
-          type: 'select',
+          key: "department",
+          label: "Department",
+          type: "select",
           editable: true,
-          class: 'department-col',
+          class: "department-col",
           options: [
-            { value: 1, text: 'HR' },
-            { value: 2, text: 'Engineer' },
-            { value: 3, text: 'VP' },
-            { value: 4, text: 'CEO' },
+            { value: 1, text: "HR" },
+            { value: 2, text: "Engineer" },
+            { value: 3, text: "VP" },
+            { value: 4, text: "CEO" },
           ],
         },
         {
-          key: 'age',
-          label: 'Age',
-          type: 'range',
-          min: '0',
-          max: '100',
+          key: "age",
+          label: "Age",
+          type: "range",
+          min: "0",
+          max: "100",
           editable: true,
-          placeholder: 'Enter Age...',
-          class: 'age-col',
+          placeholder: "Enter Age...",
+          class: "age-col",
         },
         {
-          key: 'dateOfBirth',
-          label: 'Date Of Birth',
-          type: 'date',
+          key: "dateOfBirth",
+          label: "Date Of Birth",
+          type: "date",
           editable: true,
-          class: 'date-col',
-          locale: 'en',
-          'date-format-options': {
-            year: 'numeric',
-            month: 'numeric',
-            day: 'numeric',
+          class: "date-col",
+          locale: "en",
+          "date-format-options": {
+            year: "numeric",
+            month: "numeric",
+            day: "numeric",
           },
         },
         {
-          key: 'isActive',
-          label: 'Is Active',
-          type: 'checkbox',
+          key: "isActive",
+          label: "Is Active",
+          type: "checkbox",
           editable: true,
-          class: 'is-active-col',
+          class: "is-active-col",
         },
       ],
       items: [
         {
           id: 1,
           age: 40,
-          name: 'Dickerson',
+          name: "Dickerson",
           department: 1,
-          dateOfBirth: '1984-05-20',
+          dateOfBirth: "1984-05-20",
           isActive: true,
         },
         {
           id: 2,
           age: 21,
-          name: 'Larsen',
+          name: "Larsen",
           department: 2,
-          dateOfBirth: '1972-07-25',
+          dateOfBirth: "1972-07-25",
           isActive: false,
         },
         {
           id: 3,
           age: 89,
-          name: 'Geneva',
+          name: "Geneva",
           department: 3,
-          dateOfBirth: '1981-02-02',
+          dateOfBirth: "1981-02-02",
           isActive: false,
         },
         {
           id: 4,
           age: 38,
-          name: 'Jami',
+          name: "Jami",
           department: 4,
-          dateOfBirth: '1964-10-19',
+          dateOfBirth: "1964-10-19",
           isActive: true,
         },
       ],
-    }
+    };
   },
   methods: {
     handleInput(data) {},
   },
-}
+};
 </script>
 
 <style>
 table.editable-table {
   margin: auto;
+  width: auto;
 }
 
 table.editable-table td {
   vertical-align: middle;
+  padding: 0;
 }
 
 .editable-table .data-cell {
diff --git a/dev/serve.vue b/dev/serve.vue
index dc148cd..9343f6e 100644
--- a/dev/serve.vue
+++ b/dev/serve.vue
@@ -1,37 +1,37 @@
 <script lang="ts">
-import Vue from 'vue'
+import Vue from "vue";
 // import InputValidation from './examples/input-validation.vue'
-import CompleteExample from './examples/complete-example.vue';
-// import CellEdit from './examples/cell-edit.vue'
+// import CompleteExample from './examples/complete-example.vue';
+import CellEdit from "./examples/cell-edit.vue";
 // import RowEdit from './examples/row-edit.vue';
 // import LoadApi from './examples/load-api.vue';
 // import OneWayBinding from './examples/one-way-binding.vue';
 // import AddRemoveUpdate from './examples/add-remove-update.vue';
 // import Paging from './examples/paging.vue'
-import 'bootstrap/dist/css/bootstrap.css'
-import 'bootstrap-vue/dist/bootstrap-vue.css'
+import "bootstrap/dist/css/bootstrap.css";
+import "bootstrap-vue/dist/bootstrap-vue.css";
 
 export default Vue.extend({
-  name: 'ServeDev',
+  name: "ServeDev",
   components: {
-    CompleteExample,
+    // CompleteExample,
     // InputValidation,
     // RowEdit,
     // LoadApi,
     // OneWayBinding,
     // AddRemoveUpdate,
-    // CellEdit,
+    CellEdit,
     // Paging,
   },
-})
+});
 </script>
 
 <template>
   <div id="app">
     <!-- <input-validation></input-validation> -->
-    <!-- <cell-edit></cell-edit> -->
+    <cell-edit></cell-edit>
     <!-- <row-edit></row-edit> -->
-    <complete-example></complete-example>
+    <!-- <complete-example></complete-example> -->
     <!-- <load-api></load-api> -->
     <!-- <one-way-binding></one-way-binding> -->
     <!-- <add-remove-update></add-remove-update> -->
diff --git a/src/b-editable-table.vue b/src/b-editable-table.vue
index 90571b4..686cf4b 100644
--- a/src/b-editable-table.vue
+++ b/src/b-editable-table.vue
@@ -145,11 +145,11 @@ import {
   BFormCheckbox,
   BFormRating,
   BTooltip,
-} from 'bootstrap-vue'
-import Vue from 'vue'
+} from "bootstrap-vue";
+import Vue from "vue";
 
 export default Vue.extend({
-  name: 'BEditableTable',
+  name: "BEditableTable",
   components: {
     BTable,
     BFormDatepicker,
@@ -165,11 +165,11 @@ export default Vue.extend({
     value: Array,
     editMode: {
       type: String,
-      default: 'cell',
+      default: "cell",
     },
     editTrigger: {
       type: String,
-      default: 'click',
+      default: "click",
     },
     rowUpdate: {
       type: Object,
@@ -185,14 +185,14 @@ export default Vue.extend({
       inserted: function (el: any, event: any) {
         switch (event.value) {
           case false: {
-            return
+            return;
           }
-          case 'checkbox':
-            el.children[0].focus()
-          case 'date':
-            el.children[0].focus()
+          case "checkbox":
+            el.children[0].focus();
+          case "date":
+            el.children[0].focus();
           default:
-            el.focus()
+            el.focus();
         }
       },
     },
@@ -201,14 +201,14 @@ export default Vue.extend({
         el.clickOutsideEvent = function (event: any) {
           if (!(el == event.target || el.contains(event.target))) {
             if (document.contains(event.target)) {
-              vnode.context[binding.expression](event)
+              vnode.context[binding.expression](event);
             }
           }
-        }
-        document.addEventListener('click', el.clickOutsideEvent)
+        };
+        document.addEventListener("click", el.clickOutsideEvent);
       },
       unbind: function (el: any) {
-        document.removeEventListener('click', el.clickOutsideEvent)
+        document.removeEventListener("click", el.clickOutsideEvent);
       },
     },
   },
@@ -221,40 +221,40 @@ export default Vue.extend({
       tableItems: [],
       tableMap: {},
       localChanges: {},
-    }
+    };
   },
   mounted() {
-    this.editMode = this.editMode
-    this.createTableItems(this.value ? this.value : this.items)
+    this.editMode = this.editMode;
+    this.createTableItems(this.value ? this.value : this.items);
   },
   watch: {
     value(newVal) {
-      this.createTableItems(newVal)
+      this.createTableItems(newVal);
     },
     items(newVal) {
-      this.createTableItems(newVal)
+      this.createTableItems(newVal);
     },
     rowUpdate: {
       handler(newVal) {
         if (this.tableMap[newVal.id]) {
-          this.tableMap[newVal.id].isEdit = newVal.edit
+          this.tableMap[newVal.id].isEdit = newVal.edit;
         }
-        if (newVal.action === 'update') {
-          this.clearValidation(newVal.id)
-          this.updateData(newVal.id)
-        } else if (newVal.action === 'add') {
+        if (newVal.action === "update") {
+          this.clearValidation(newVal.id);
+          this.updateData(newVal.id);
+        } else if (newVal.action === "add") {
           this.updateData(
             newVal.id,
-            'add',
+            "add",
             { ...newVal.data },
             newVal.edit,
-            newVal.addPosition,
-          )
-        } else if (newVal.action === 'delete') {
-          this.updateData(newVal.id, 'delete')
-        } else if (newVal.action === 'cancel' || newVal.isEdit === false) {
-          this.clearValidation(newVal.id)
-          delete this.localChanges[newVal.id]
+            newVal.addPosition
+          );
+        } else if (newVal.action === "delete") {
+          this.updateData(newVal.id, "delete");
+        } else if (newVal.action === "cancel" || newVal.isEdit === false) {
+          this.clearValidation(newVal.id);
+          delete this.localChanges[newVal.id];
         }
       },
       deep: true,
@@ -264,229 +264,229 @@ export default Vue.extend({
   methods: {
     handleEditCell(e: any, id: number, name: string, editable: Boolean) {
       if (!this.disableDefaultEdit && editable) {
-        e.stopPropagation()
-        this.clearEditMode()
-        this.updateData()
-        this.tableMap[id].isEdit = true
-        this.selectedCell = name
-        this.clearValidation(id)
+        e.stopPropagation();
+        this.clearEditMode();
+        this.updateData();
+        this.tableMap[id].isEdit = true;
+        this.selectedCell = name;
+        this.clearValidation(id);
         if (!this.localChanges[id]) {
-          this.localChanges[id] = {}
+          this.localChanges[id] = {};
         }
       }
     },
     clearValidation(id: any) {
       // Clear validation for the selected row
       for (const key in this.tableMap[id].fields) {
-        this.tableMap[id].fields[key].validity = { valid: true }
+        this.tableMap[id].fields[key].validity = { valid: true };
       }
     },
     handleKeydown(e: any, index: number, data: any) {
       if (
-        (e.code === 'Tab' || e.code === 'Enter') &&
-        this.editMode === 'cell' &&
+        (e.code === "Tab" || e.code === "Enter") &&
+        this.editMode === "cell" &&
         !this.disableDefaultEdit
       ) {
-        e.preventDefault()
-        let fieldIndex = this.fields.length - 1 === index ? 0 : index + 1
+        e.preventDefault();
+        let fieldIndex = this.fields.length - 1 === index ? 0 : index + 1;
         let rowIndex =
           this.fields.length - 1 === index
             ? this.tableMap[data.item.id].rowIndex + 1
-            : this.tableMap[data.item.id].rowIndex
-        let i = fieldIndex
+            : this.tableMap[data.item.id].rowIndex;
+        let i = fieldIndex;
         // Find next editable field
         while (!this.fields[i].editable) {
           if (i === this.fields.length - 1) {
-            i = 0
-            rowIndex++
+            i = 0;
+            rowIndex++;
           } else {
-            i++
+            i++;
           }
         }
-        fieldIndex = i
-        this.selectedCell = this.fields[fieldIndex].key
-        this.clearEditMode(data.item.id)
-        this.updateData(data.item.id)
+        fieldIndex = i;
+        this.selectedCell = this.fields[fieldIndex].key;
+        this.clearEditMode(data.item.id);
+        this.updateData(data.item.id);
 
-        const rowId = this.tableItems[rowIndex]?.id
+        const rowId = this.tableItems[rowIndex]?.id;
         if (this.tableMap[rowId]) {
-          this.tableMap[rowId].isEdit = true
+          this.tableMap[rowId].isEdit = true;
           if (!this.localChanges[rowId]) {
-            this.localChanges[rowId] = {}
+            this.localChanges[rowId] = {};
           }
         }
-      } else if (e.code === 'Escape') {
-        e.preventDefault()
-        this.selectedCell = null
-        this.clearEditMode(data.item.id)
-        this.localChanges = {}
+      } else if (e.code === "Escape") {
+        e.preventDefault();
+        this.selectedCell = null;
+        this.clearEditMode(data.item.id);
+        this.localChanges = {};
       }
     },
     handleClickOut() {
       if (!this.disableDefaultEdit) {
-        this.selectedCell = null
-        this.clearEditMode()
-        this.updateData()
+        this.selectedCell = null;
+        this.clearEditMode();
+        this.updateData();
       }
     },
     inputHandler(value: any, data: any, key: string, options: Array<any>) {
-      let changedValue = value
+      let changedValue = value;
       // Handle select element with options
       if (options) {
-        const selectedValue = options.find((item) => item.value === value)
-        changedValue = selectedValue ? selectedValue.value : value
+        const selectedValue = options.find((item) => item.value === value);
+        changedValue = selectedValue ? selectedValue.value : value;
       }
 
       const validity = data.field.validate
         ? data.field.validate(changedValue, data)
-        : { valid: true }
-      const fields = this.tableMap[data.item.id].fields
-      fields[key].validity.valid = true
+        : { valid: true };
+      const fields = this.tableMap[data.item.id].fields;
+      fields[key].validity.valid = true;
 
       if (this.value && (!validity || validity?.valid === true)) {
         if (!this.localChanges[data.item.id]) {
-          this.localChanges[data.item.id] = {}
+          this.localChanges[data.item.id] = {};
         }
         this.localChanges[data.item.id][key] = {
           value: changedValue,
           rowIndex: this.tableMap[data.item.id]?.rowIndex,
-        }
+        };
       } else {
-        fields[key].validity = validity
+        fields[key].validity = validity;
       }
-      const fieldType = data.field.type
+      const fieldType = data.field.type;
       const excludeTypes: any = {
         text: true,
         range: true,
         number: true,
-      }
+      };
       if (!excludeTypes[fieldType]) {
-        this.$emit('input-change', {
+        this.$emit("input-change", {
           ...data,
           id: data.item.id,
           value: changedValue,
           validity: { ...fields[key].validity },
-        })
+        });
       }
     },
     changeHandler(value: any, data: any, key: string) {
-      this.$emit('input-change', {
+      this.$emit("input-change", {
         ...data,
         id: data.item.id,
         value,
         validity: { ...this.tableMap[data.item.id].fields[key].validity },
-      })
+      });
     },
     updateData(
       id: any,
       action: String,
       data: any,
       isEdit: Boolean,
-      addPosition: String,
+      addPosition: String
     ) {
-      let isUpdate = false
-      const objId = id ? id : Object.keys(this.localChanges)[0]
-      if (action === 'add') {
-        isUpdate = true
+      let isUpdate = false;
+      const objId = id ? id : Object.keys(this.localChanges)[0];
+      if (action === "add") {
+        isUpdate = true;
         // Warning: if watcher don't trigger the new row will not update the tableMap properly
-        this.tableMap[id] = { id, isEdit, fields: {} }
-        if (addPosition === 'end') {
-          this.tableItems.push(data)
+        this.tableMap[id] = { id, isEdit, fields: {} };
+        if (addPosition === "end") {
+          this.tableItems.push(data);
         } else {
-          this.tableItems.unshift(data)
+          this.tableItems.unshift(data);
         }
-      } else if (action === 'delete') {
-        isUpdate = true
-        delete this.tableMap[id]
-        this.tableItems = this.tableItems.filter((item: any) => item.id !== id)
+      } else if (action === "delete") {
+        isUpdate = true;
+        delete this.tableMap[id];
+        this.tableItems = this.tableItems.filter((item: any) => item.id !== id);
       } else {
         const objValue = id
           ? this.localChanges[id]
-          : Object.values(this.localChanges)[0]
+          : Object.values(this.localChanges)[0];
 
         // If v-model is set then emit updated table
         if (this.value && objValue) {
           Object.keys(objValue).forEach((key: any) => {
-            isUpdate = true
-            const cell = objValue[key]
-            this.tableMap[objId].fields[key].value = cell.value
-            let rowIndex = cell.rowIndex
-            const currentPage = this.$attrs['current-page']
-            const perPage = this.$attrs['per-page']
+            isUpdate = true;
+            const cell = objValue[key];
+            this.tableMap[objId].fields[key].value = cell.value;
+            let rowIndex = cell.rowIndex;
+            const currentPage = this.$attrs["current-page"];
+            const perPage = this.$attrs["per-page"];
             if (currentPage > 1 && perPage > 0) {
-              rowIndex = (currentPage - 1) * perPage + rowIndex
+              rowIndex = (currentPage - 1) * perPage + rowIndex;
             }
-            this.tableItems[rowIndex][key] = cell.value
-          })
+            this.tableItems[rowIndex][key] = cell.value;
+          });
         }
       }
       if (isUpdate) {
-        this.$emit('input', this.tableItems)
+        this.$emit("input", this.tableItems);
       }
-      delete this.localChanges[id ? id : objId]
+      delete this.localChanges[id ? id : objId];
     },
     handleListeners(listeners: any) {
       // Exclude listeners that are not part of Bootstrap Vue
       const excludeEvents: any = {
         input: true,
-        'input-change': true,
-      }
+        "input-change": true,
+      };
       return Object.keys(listeners).reduce(
         (a: any, c: any) =>
           excludeEvents[c] ? a : { ...a, [c]: listeners[c] },
-        {},
-      )
+        {}
+      );
     },
     getCellValue(data: any, field: any) {
-      const row = this.tableMap[data.item.id]
+      const row = this.tableMap[data.item.id];
       let value =
-        row && row.fields[field.key] ? row.fields[field.key].value : ''
+        row && row.fields[field.key] ? row.fields[field.key].value : "";
       // Handle select element with options
       if (data.field.options) {
         const selectedValue = data.field.options.find(
-          (item: any) => item.value === value,
-        )
-        value = selectedValue ? selectedValue.text : value
+          (item: any) => item.value === value
+        );
+        value = selectedValue ? selectedValue.text : value;
       }
-      return value
+      return value;
     },
     getCellData(data: any) {
       return {
         ...data,
         isEdit: this.tableMap[data.item.id].isEdit,
         id: data.item.id,
-      }
+      };
     },
     getValidity(data: any, field: any) {
-      return this.tableMap[data.item.id].fields[field.key].validity
+      return this.tableMap[data.item.id].fields[field.key].validity;
     },
     showField(field: any, data: any, type: string) {
       return (
         field.type === type &&
         this.tableMap[data.item.id]?.isEdit &&
-        (this.selectedCell === field.key || this.editMode === 'row') &&
+        (this.selectedCell === field.key || this.editMode === "row") &&
         field.editable
-      )
+      );
     },
     getFieldValue(field: any, data: any) {
-      return this.tableMap[data.item.id].fields[field.key]?.value
+      return this.tableMap[data.item.id].fields[field.key]?.value;
     },
     enableFocus(type: string) {
-      return this.editMode === 'cell' ? type : false
+      return this.editMode === "cell" ? type : false;
     },
     clearEditMode(id: any) {
       if (id) {
-        this.tableMap[id].isEdit = false
+        this.tableMap[id].isEdit = false;
       } else {
         for (const changeId in this.localChanges) {
           if (this.tableMap[changeId]) {
-            this.tableMap[changeId].isEdit = false
+            this.tableMap[changeId].isEdit = false;
           }
         }
       }
     },
     createTableItems(data: Array<any>) {
-      this.tableItems = data.map((item: any) => ({ ...item }))
+      this.tableItems = data.map((item: any) => ({ ...item }));
       this.tableMap = data.reduce(
         (rows, curRow, rowIndex) => ({
           ...rows,
@@ -506,24 +506,18 @@ export default Vue.extend({
                     : { valid: true },
                 },
               }),
-              {},
+              {}
             ),
           },
         }),
-        {},
-      )
+        {}
+      );
     },
   },
-})
+});
 </script>
 
 <style scoped>
-table.b-table {
-  width: unset;
-}
-table.b-table td {
-  padding: 0;
-}
 .data-cell {
   display: flex;
   width: 100%;