fix: component state messed up due to non-unique v-key

Author: uwla

README.md

@@ -131,8 +131,12 @@ Nuxt automatically loads the files in the `plugins/` directory by default.
 
 Only `data` e `columns` are required. Other props are optional.
 
+`vKey` is not required but is **highly** recommend to set it if you plan to
+add or delete rows in the table!
+
 | prop                  | type               | default                           | description                                                                                |
 | --------------------- | ------------------ | --------------------------------- | ------------------------------------------------------------------------------------------ |
+| allowedExports        | `Array`            | `["csv", "json", "txt"]`          | Formats the user can export the data to. Allowed values: `csv`, `json`, `txt`, `xlsx`      |
 | data                  | `Array`            | -                                 | Array of objects with the data to be displayed on the table                                |
 | columns               | `Array`            | -                                 | Array of objects to specify how to render each column. Optional if `columnKeys` is set     |
 | columnKeys            | `Array`            | -                                 | Array of strings matching the object keys in `data`. Discarded if `columns` is set         |
@@ -151,7 +155,7 @@ Only `data` e `columns` are required. Other props are optional.
 | sortingIndexComponent | `String`, `Object` | `VdtSortingIndex`                 | VueJS component for the sorting index on sortable columns                                  |
 | sortingIconComponent  | `String`, `Object` | `VdtSortingIcon`                  | VueJS component for the sorting icon on sortable columns                                   |
 | footerComponent       | `String`, `Object` | `null`                            | VueJS component for custom table footer                                                    |
-| allowedExports        | `Array`            | `["csv", "json", "txt"]`          | Formats the user can export the data to. Allowed values: `csv`, `json`, `txt`, `xlsx`      |
+| vKey                  | `String`           | -                                 | The `v-key`, the key in `data` used by Vue to track and distinguish array elements.        |
 
 ### Columns
 

src/components/DataTable.ts

@@ -65,22 +65,22 @@ export default defineComponent({
             type: [Object, String],
             default: null
         },
-        perPageSizes: {
-            type: Array,
-            default: () => [10, 25, 50, 100, '*']
+        isLoading: {
+            type: Boolean,
+            default: false,
         },
         lang: {
             type: String,
             default: "en"
         },
-        isLoading: {
-            type: Boolean,
-            default: false,
-        },
         loadingComponent: {
             type: [Object, String],
             default: () => "",
         },
+        perPageSizes: {
+            type: Array,
+            default: () => [10, 25, 50, 100, '*']
+        },
         showEntriesInfo: {
             type: Boolean,
             default: true
@@ -127,7 +127,11 @@ export default defineComponent({
         text: {
             type: Object,
             required: false
-        }
+        },
+        vKey: {
+            type: String,
+            default: "",
+        },
     },
 
     data: () => {
@@ -196,7 +200,11 @@ export default defineComponent({
             const { searchableColumns, search } = this
 
             // assign key to track row
-            const data = this.data.map((value, index) => {
+            const key = this.vKey;
+            const data = this.data.map((value: any, index) => {
+                if (key !== "" && value[key]) {
+                    index = value[key];
+                }
                 return {
                     ...(value as Object),
                     _key: index,

src/components/Table/Table.vue

@@ -41,16 +41,16 @@
 
                 <!-- NON-EMPTY BODY -->
                 <tr v-for="data in dataDisplayed" :key="data._key">
-                    <keep-alive>
-                    <td v-for="(column, j) in columns"
-                        :key="'c' + data._key + 'c' + j"
-                        >
-                            <component
-                                :is="column.component"
-                                v-bind="{ data, ...column.componentProps }"
-                                @userEvent="emitUserEvent" />
+                    <td
+                        v-for="(column, j) in columns"
+                        :key="data._key + '_' + j"
+                    >
+                        <component
+                            :is="column.component"
+                            :key="'__' + data._key + '_' + j"
+                            v-bind="{ data, ...column.componentProps }"
+                            @userEvent="emitUserEvent" />
                     </td>
-                    </keep-alive>
                 </tr>
             </tbody>