fix: track state of visible components

Some components would lose their state after applying search filter.
This bug is partially solved.

Author: uwla

src/components/DataTable.ts

@@ -193,10 +193,20 @@ export default defineComponent({
          * The data filtered by search text
          */
         dataFiltered() {
-            const { data, searchableColumns, search } = this
+            const { searchableColumns, search } = this
+
+            // assign key to track row
+            const data = this.data.map((value, index) => {
+                return {
+                    ...(value as Object),
+                    _key: index,
+                };
+            })
+
             if (isNullable(search)) {
                 return data
             }
+
             return data.filter(function(row: any) {
                 return searchableColumns.some(function(column: Column) {
                     return column.searchFunction(row, search, column.key)

src/components/Table/Table.vue

@@ -40,12 +40,17 @@
                 </tr>
 
                 <!-- NON-EMPTY BODY -->
-                <tr v-for="(data, i) in dataDisplayed" :key="i">
-                    <td v-for="(column, j) in columns" :key="j">
-                        <component :is="column.component"
-                            v-bind="{ data, ...column.componentProps }"
-                            @userEvent="emitUserEvent" />
+                <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>
+                    </keep-alive>
                 </tr>
             </tbody>