feat: improve caching for KTableData

package.json

@@ -63,7 +63,7 @@
     "focus-trap-vue": "^4.0.3",
     "nanoid": "^5.0.9",
     "sortablejs": "^1.15.3",
-    "swrv": "^1.0.4",
+    "swrv": "1.1.0-beta.2",
     "v-calendar": "^3.1.2",
     "vue-draggable-next": "^2.2.1"
   },

sandbox/index.ts

@@ -48,6 +48,7 @@ const sandboxAppLinks: SandboxNavigationItem[] = ([
   { name: 'KTextarea', to: { name: 'textarea' } },
   { name: 'KToaster', to: { name: 'toaster' } },
   { name: 'KTreeList', to: { name: 'treelist' } },
+  { name: 'KTableData 2', to: { name: 'table-data-2' } },
 ])
 
 // Provide the app links to the SandboxLayout components

sandbox/pages/SandboxTableData2.vue

@@ -0,0 +1,148 @@
+<template>
+  <SandboxLayout
+    :links="inject('app-links', [])"
+    title="KTableData + SWRV beta"
+  >
+    <div class="horizontal-container">
+      <KInput v-model="query" />
+      <KButton @click="deleteZach()">
+        Delete Zach (revalidate)
+      </KButton>
+      <KButton @click="deleteZach(false)">
+        Delete Zach (no revalidate)
+      </KButton>
+      <KButton @click="show = !show">
+        Toggle Table
+      </KButton>
+    </div>
+    <div class="swrv-sandbox">
+      <KTableData
+        v-if="show"
+        cache-identifier="table"
+        :fetcher="fetcher"
+        :fetcher-cache-key="String(cacheKey)"
+        :headers="headers"
+        :search-input="query"
+      />
+    </div>
+  </SandboxLayout>
+</template>
+
+<script setup lang="ts">
+import { inject, ref } from 'vue'
+import type { TableDataFetcherParams, TableDataHeader } from '@/types'
+
+const headers: TableDataHeader[] = [
+  { key: 'actions', label: 'Row actions' },
+  { key: 'name', label: 'Full Name' },
+  {
+    key: 'username',
+    label: 'Username',
+    tooltip: 'Columns with a tooltip.',
+    sortable: true,
+  },
+  { key: 'email', label: 'Email', hidable: true },
+]
+
+const cacheKey = ref(1)
+
+const query = ref('')
+const show = ref(true)
+
+const data: Item[] = [
+  { name: 'John Doe', username: 'johndoe', email: '[email protected]' },
+  { name: 'Jane Smith', username: 'janesmith', email: '[email protected]' },
+  { name: 'Alice Johnson', username: 'alicej', email: '[email protected]' },
+  { name: 'Bob Brown', username: 'bobbrown', email: '[email protected]' },
+  { name: 'Charlie Davis', username: 'charlied', email: '[email protected]' },
+  { name: 'David Wilson', username: 'davidw', email: '[email protected]' },
+  { name: 'Eva Green', username: 'evagreen', email: '[email protected]' },
+  { name: 'Frank Harris', username: 'frankh', email: '[email protected]' },
+  { name: 'Grace Lee', username: 'gracelee', email: '[email protected]' },
+  { name: 'Henry King', username: 'henryk', email: '[email protected]' },
+  { name: 'Ivy Scott', username: 'ivyscott', email: '[email protected]' },
+  { name: 'Jack White', username: 'jackwhite', email: '[email protected]' },
+  { name: 'Karen Young', username: 'kareny', email: '[email protected]' },
+  { name: 'Leo Walker', username: 'leowalker', email: '[email protected]' },
+  { name: 'Mia Hall', username: 'miahall', email: '[email protected]' },
+  { name: 'Noah Allen', username: 'noahallen', email: '[email protected]' },
+  { name: 'Olivia Wright', username: 'oliviawright', email: '[email protected]' },
+  { name: 'Paul Adams', username: 'pauladams', email: '[email protected]' },
+  { name: 'Quinn Baker', username: 'quinnb', email: '[email protected]' },
+  { name: 'Rachel Clark', username: 'rachelc', email: '[email protected]' },
+  { name: 'Sam Evans', username: 'samevans', email: '[email protected]' },
+  { name: 'Tina Foster', username: 'tinaf', email: '[email protected]' },
+  { name: 'Uma Garcia', username: 'umag', email: '[email protected]' },
+  { name: 'Victor Hill', username: 'victorh', email: '[email protected]' },
+  { name: 'Wendy Johnson', username: 'wendyj', email: '[email protected]' },
+  { name: 'Xander Lee', username: 'xanderl', email: '[email protected]' },
+  { name: 'Yara Martinez', username: 'yaram', email: '[email protected]' },
+  { name: 'Zach Nelson', username: 'zachn', email: '[email protected]' },
+  { name: 'Amy O\'Connor', username: 'amyo', email: '[email protected]' },
+  { name: 'Brian Peterson', username: 'brianp', email: '[email protected]' },
+  { name: 'Cathy Quinn', username: 'cathyq', email: '[email protected]' },
+  { name: 'Derek Roberts', username: 'derekr', email: '[email protected]' },
+  { name: 'Ella Stevens', username: 'ellas', email: '[email protected]' },
+  { name: 'Felix Turner', username: 'felixt', email: '[email protected]' },
+  { name: 'Gina Underwood', username: 'ginau', email: '[email protected]' },
+  { name: 'Hank Vance', username: 'hankv', email: '[email protected]' },
+  { name: 'Iris West', username: 'irisw', email: '[email protected]' },
+  { name: 'Jake Young', username: 'jakey', email: '[email protected]' },
+  { name: 'Kara Zane', username: 'karaz', email: '[email protected]' },
+  { name: 'Liam Brown', username: 'liamb', email: '[email protected]' },
+  { name: 'Mona Clark', username: 'monac', email: '[email protected]' },
+  { name: 'Nina Davis', username: 'ninad', email: '[email protected]' },
+  { name: 'Oscar Edwards', username: 'oscare', email: '[email protected]' },
+  { name: 'Penny Foster', username: 'pennyf', email: '[email protected]' },
+  { name: 'Quincy Green', username: 'quincyg', email: '[email protected]' },
+  { name: 'Rita Harris', username: 'ritah', email: '[email protected]' },
+  { name: 'Steve Irwin', username: 'stevei', email: '[email protected]' },
+  { name: 'Tara Jones', username: 'taraj', email: '[email protected]' },
+]
+
+interface Item {
+  name: string
+  username: string
+  email: string
+}
+
+async function fetcher({
+  pageSize,
+  page,
+  query,
+  sortColumnOrder, // sort by `username`
+}: TableDataFetcherParams) {
+  await new Promise((resolve) => setTimeout(resolve, 500))
+  const start = pageSize! * (page! - 1)
+  const end = start + pageSize!
+  const filteredData = data.filter(({ name, username, email }: Item) => {
+    const q = query?.toLowerCase() ?? ''
+    return [name, username, email].some(value => value.toLowerCase().includes(q))
+  })
+  const sortedData = filteredData.sort((a: Item, b: Item) => {
+    return sortColumnOrder === 'asc' ? a.username.localeCompare(b.username) : b.username.localeCompare(a.username)
+  })
+  return {
+    data: sortedData.slice(start, end),
+    total: sortedData.length,
+  }
+}
+
+function deleteZach(revalidate = true) {
+  const index = data.findIndex((item) => item.name === 'Zach Nelson')
+  if (index !== -1) {
+    data.splice(index, 1)
+    if (revalidate) {
+      cacheKey.value++
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.horizontal-container {
+  display: flex;
+  gap: $kui-space-40;
+  justify-content: space-between;
+}
+</style>

sandbox/router/sandbox-routes.ts

@@ -212,6 +212,12 @@ const componentRoutes: RouteRecordRaw[] = [
     meta: { title: 'Tree List Sandbox' },
     component: () => import('../pages/SandboxTreeList.vue'),
   },
+  {
+    path: '/table-data-2',
+    name: 'table-data-2',
+    meta: { title: 'Table Data 2 Sandbox' },
+    component: () => import('../pages/SandboxTableData2.vue'),
+  },
 ]
 
 export default componentRoutes