@iankibetsh/shframework 5.8.3 → 5.8.4

package/README.md

@@ -22,6 +22,9 @@ A robust table component that handles server-side pagination, searching, and cus
 - **Auto-Label Generation**: Automatically generates human-readable labels from keys if not explicitly provided (e.g., `user.first_name` becomes "First Name").
 - **Named Slots for Custom Formatting**: Use named slots for columns to provide custom formatting (e.g., `<template #age="{ row }">`).
 - **Multi-Action Support**: Enable row selection and collective operations with a floating action bar.
+- **Caching & Background Loading**: Uses IndexedDB to cache data. Shows cached data immediately while fetching fresh data in the background (enabled via `enableTableCache` config or `:cache="true"` prop).
+- **Row Links**: Easily define clickable rows with dynamic placeholders (e.g., `:row-link="'/users/{id}'"`).
+- **Search Optimization**: Automatically clears stale data and shows a spinner when searching to ensure fresh results.
 - **Links & Actions**: Easily define column links and action buttons.
 
 ```html

package/dist/dist/library.mjs.css

@@ -1,4 +1,36 @@
 
+.sh-phone{
+  display: flex;
+  width: 100%;
+  align-items: center;
+  padding: 0 0.25rem;
+}
+.phone-country{
+  width: 2rem;
+  border: none;
+  align-self: center;
+  outline: none !important;
+  padding: 0.4rem;
+  border-right: 1px solid #0003;
+}
+.phone-number{
+  width: calc(100% - 2.2rem);
+  border: none;
+  align-self: center;
+  outline: none;
+  margin-bottom: 0;
+  padding: 0.4rem;
+}
+.sh-phone img{
+  padding: 0.125rem;
+  width: 2rem;
+  height: 2rem;
+}
+.phone-number::placeholder{
+  font-weight: 300;
+  opacity: 0.5;
+}
+
 /* Step Container */
 .sh-form-steps-container {
   margin-bottom: 2.5rem;
@@ -300,53 +332,8 @@
   z-index: 1050;
   min-width: 300px;
 }
-
-.sh-phone{
-  display: flex;
-  width: 100%;
-  align-items: center;
-  padding: 0 0.25rem;
-}
-.phone-country{
-  width: 2rem;
-  border: none;
-  align-self: center;
-  outline: none !important;
-  padding: 0.4rem;
-  border-right: 1px solid #0003;
-}
-.phone-number{
-  width: calc(100% - 2.2rem);
-  border: none;
-  align-self: center;
-  outline: none;
-  margin-bottom: 0;
-  padding: 0.4rem;
-}
-.sh-phone img{
-  padding: 0.125rem;
-  width: 2rem;
-  height: 2rem;
-}
-.phone-number::placeholder{
-  font-weight: 300;
-  opacity: 0.5;
-}
-
-.sh-selected-item{
-  line-height: unset!important;
-}
-.sh-suggestion-input{
-  padding: 0.375rem 0.75rem;
-}
-.sh-suggest{
-  margin-bottom: 1rem;
-  padding: 0rem 0rem;
-}
-.sh-suggest-control::after{
-  margin-top: auto;
-  margin-bottom: auto;
-  margin-right: 0.255em;
+.cursor-pointer {
+  cursor: pointer;
 }
 
 .permissions-main {
@@ -381,6 +368,22 @@
   flex-grow: 1;
 }
 
+.sh-selected-item{
+  line-height: unset!important;
+}
+.sh-suggestion-input{
+  padding: 0.375rem 0.75rem;
+}
+.sh-suggest{
+  margin-bottom: 1rem;
+  padding: 0rem 0rem;
+}
+.sh-suggest-control::after{
+  margin-top: auto;
+  margin-bottom: auto;
+  margin-right: 0.255em;
+}
+
 .callout{
   --bs-link-color-rgb: 110,168,254;
   --bs-code-color: #e685b5;

package/dist/library.js

@@ -19,7 +19,7 @@ var Swal__default = /*#__PURE__*/_interopDefaultLegacy(Swal);
 var NProgress__default = /*#__PURE__*/_interopDefaultLegacy(NProgress);
 var ___default = /*#__PURE__*/_interopDefaultLegacy(_);
 
-function setItem (key, value) {
+function setItem$1 (key, value) {
   let toStore = value;
   if (typeof value === 'object') {
     toStore = JSON.stringify(value);
@@ -27,20 +27,20 @@ function setItem (key, value) {
   return localStorage.setItem(key, toStore)
 }
 
-function getItem (key) {
+function getItem$1 (key) {
   try {
    return  JSON.parse(localStorage.getItem(key))
   } catch (err) {
     return localStorage.getItem(key)
   }
 }
-function removeItem (key) {
+function removeItem$1 (key) {
   return localStorage.removeItem(key)
 }
 var shStorage = {
-  setItem,
-  getItem,
-  removeItem
+  setItem: setItem$1,
+  getItem: getItem$1,
+  removeItem: removeItem$1
 };
 
 function swalSuccess(message){
@@ -5464,6 +5464,112 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
 script$e.render = render$1;
 script$e.__file = "src/lib/components/list_templates/Pagination.vue";
 
+const DB_NAME = 'ShTableCacheDB';
+const STORE_NAME = 'table_cache';
+const DB_VERSION = 1;
+
+let dbPromise = null;
+
+function getDB() {
+  if (dbPromise) return dbPromise;
+
+  dbPromise = new Promise((resolve, reject) => {
+    const request = indexedDB.open(DB_NAME, DB_VERSION);
+
+    request.onupgradeneeded = (event) => {
+      const db = event.target.result;
+      if (!db.objectStoreNames.contains(STORE_NAME)) {
+        db.createObjectStore(STORE_NAME);
+      }
+    };
+
+    request.onsuccess = (event) => {
+      resolve(event.target.result);
+    };
+
+    request.onerror = (event) => {
+      console.error('IndexedDB error:', event.target.error);
+      reject(event.target.error);
+    };
+  });
+
+  return dbPromise;
+}
+
+async function setItem(key, value) {
+  try {
+    const db = await getDB();
+    return new Promise((resolve, reject) => {
+      const transaction = db.transaction([STORE_NAME], 'readwrite');
+      const store = transaction.objectStore(STORE_NAME);
+      const request = store.put(value, key);
+
+      request.onsuccess = () => resolve();
+      request.onerror = (event) => reject(event.target.error);
+    });
+  } catch (error) {
+    console.error('ShIndexedDB setItem error:', error);
+  }
+}
+
+async function getItem(key, defaultValue = null) {
+  try {
+    const db = await getDB();
+    return new Promise((resolve, reject) => {
+      const transaction = db.transaction([STORE_NAME], 'readonly');
+      const store = transaction.objectStore(STORE_NAME);
+      const request = store.get(key);
+
+      request.onsuccess = (event) => {
+        resolve(event.target.result !== undefined ? event.target.result : defaultValue);
+      };
+      request.onerror = (event) => reject(event.target.error);
+    });
+  } catch (error) {
+    console.error('ShIndexedDB getItem error:', error);
+    return defaultValue;
+  }
+}
+
+async function removeItem(key) {
+  try {
+    const db = await getDB();
+    return new Promise((resolve, reject) => {
+      const transaction = db.transaction([STORE_NAME], 'readwrite');
+      const store = transaction.objectStore(STORE_NAME);
+      const request = store.delete(key);
+
+      request.onsuccess = () => resolve();
+      request.onerror = (event) => reject(event.target.error);
+    });
+  } catch (error) {
+    console.error('ShIndexedDB removeItem error:', error);
+  }
+}
+
+async function clear() {
+    try {
+        const db = await getDB();
+        return new Promise((resolve, reject) => {
+            const transaction = db.transaction([STORE_NAME], 'readwrite');
+            const store = transaction.objectStore(STORE_NAME);
+            const request = store.clear();
+
+            request.onsuccess = () => resolve();
+            request.onerror = (event) => reject(event.target.error);
+        });
+    } catch (error) {
+        console.error('ShIndexedDB clear error:', error);
+    }
+}
+
+var shIndexedDB = {
+  setItem,
+  getItem,
+  removeItem,
+  clear
+};
+
 const _hoisted_1$b = { class: "auto-table mt-2" };
 const _hoisted_2$8 = {
   key: 0,
@@ -5648,6 +5754,10 @@ var script$d = {
   selectedRange: [Object, null],
   noRecordsMessage: [String, null],
   multiActions: { type: Array, default: () => [] },
+  // Caching configuration: true to enable, false to disable. If null, respects global configure 'enableTableCache'
+  cache: { type: Boolean, default: null },
+  // Dynamic link for the entire row. Supports placeholders like '/user/{id}'
+  rowLink: [String, null],
 },
   emits: ["rowSelected", "dataReloaded", "dataLoaded"],
   setup(__props, { emit: __emit }) {
@@ -5706,7 +5816,7 @@ const hasRecordsSlot = vue.computed(() => !!slots.records);
 const hasEmptySlot = vue.computed(() => !!slots.empty);
 
 // --- Lifecycle
-vue.onMounted(() => {
+vue.onMounted(async () => {
   if (props.headers) tableHeaders.value = props.headers;
 
   if (props.actions?.actions) {
@@ -5715,7 +5825,7 @@ vue.onMounted(() => {
     });
   }
 
-  if (props.cacheKey) setCachedData();
+  if (shouldCache.value) await setCachedData();
 
   reloadData();
 
@@ -5793,14 +5903,28 @@ const canvasClosed = () => {
   selectedRecord.value = null;
 };
 
+const router = vueRouter.useRouter();
 const rowSelected = (row) => {
   selectedRecord.value = null;
   setTimeout(() => {
     selectedRecord.value = row;
     emit("rowSelected", row);
+    if (props.rowLink) {
+      router.push(replaceRowLink(props.rowLink, row));
+    }
   }, 100);
 };
 
+const replaceRowLink = (p, obj) => {
+  let path = p;
+  const matches = path.match(/\{(.*?)\}/g);
+  matches?.forEach((k) => {
+    const key = k.replace("{", "").replace("}", "");
+    path = path.replace(`{${key}}`, obj[key]);
+  });
+  return path;
+};
+
 const changeKey = (key, value) => {
   if (key === "order_by") {
     order_by.value = value;
@@ -5941,20 +6065,46 @@ const exportData = () => {
     });
 };
 
-const setCachedData = () => {
-  if (props.cacheKey) {
-    records.value = shStorage.getItem("sh_table_cache_" + props.cacheKey, null);
+// Attempts to load data from IndexedDB before API call
+const setCachedData = async () => {
+  if (shouldCache.value) {
+    const cached = await shIndexedDB.getItem(computedCacheKey.value, null);
+    if (cached) {
+      records.value = cached;
+      // Set to 'done' immediately to show cached data without initial spinner
+      loading.value = "done";
+    }
   }
 };
 
+// Determines if caching should be active based on component props or global configuration
+const shouldCache = vue.computed(() => {
+  if (props.cache !== null) return props.cache;
+  return shRepo.getShConfig("enableTableCache", false);
+});
+
+// Generates a unique, slug-safe key for IndexedDB storage
+const computedCacheKey = vue.computed(() => {
+  if (props.cacheKey) return "sh_table_cache_" + props.cacheKey;
+  const keyBase = props.endPoint || props.query || "default";
+  const safeBase = keyBase.replace(/[^a-z0-9]/gi, "_").toLowerCase();
+  return "sh_table_cache_" + safeBase;
+});
+
 // Main loader
+// Main data fetcher. Handles background updates when cache is present
 const reloadData = (newPage, append) => {
   if (typeof newPage !== "undefined") page.value = newPage;
 
-  if (props.cacheKey && records.value !== null) {
+  // If we have cached data and not searching, we don't show the initial loading spinner
+  if (shouldCache.value && records.value && records.value.length > 0 && !filter_value.value) {
     loading.value = "done";
   } else if (!append) {
     loading.value = "loading";
+    // Clear records when searching to ensure we show fresh results
+    if (filter_value.value) {
+      records.value = [];
+    }
   }
 
   let data = {
@@ -5993,8 +6143,8 @@ const reloadData = (newPage, append) => {
       const response = req.data.data;
       emit("dataLoaded", response);
 
-      if (page.value < 2 && props.cacheKey) {
-        shStorage.setItem("sh_table_cache_" + props.cacheKey, response.data);
+      if (page.value < 2 && shouldCache.value) {
+        shIndexedDB.setItem(computedCacheKey.value, response.data);
       }
 
       pagination_data.value = {
@@ -6179,7 +6329,7 @@ return (_ctx, _cache) => {
       : vue.createCommentVNode("v-if", true),
     (hasDefaultSlot.value)
       ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 2 }, [
-          (loading.value === 'loading')
+          (loading.value === 'loading' && records.value.length === 0)
             ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_9$2, [...(_cache[13] || (_cache[13] = [
                 vue.createElementVNode("div", {
                   class: "spinner-border",
@@ -6188,12 +6338,12 @@ return (_ctx, _cache) => {
                   vue.createElementVNode("span", { class: "visually-hidden" }, "Loading...")
                 ], -1 /* CACHED */)
               ]))]))
-            : (loading.value === 'error')
+            : (loading.value === 'error' && records.value.length === 0)
               ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_10$2, [
                   vue.createElementVNode("span", null, vue.toDisplayString(loading_error.value), 1 /* TEXT */)
                 ]))
               : vue.createCommentVNode("v-if", true),
-          (loading.value === 'done')
+          (loading.value === 'done' || records.value.length > 0)
             ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 2 }, [
                 (records.value.length === 0)
                   ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
@@ -6217,7 +6367,7 @@ return (_ctx, _cache) => {
         ], 64 /* STABLE_FRAGMENT */))
       : (hasRecordsSlot.value)
         ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 3 }, [
-            (loading.value === 'loading' && !__props.cacheKey)
+            (loading.value === 'loading' && records.value.length === 0)
               ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_12$1, [...(_cache[15] || (_cache[15] = [
                   vue.createElementVNode("div", {
                     class: "spinner-border",
@@ -6226,12 +6376,12 @@ return (_ctx, _cache) => {
                     vue.createElementVNode("span", { class: "visually-hidden" }, "Loading...")
                   ], -1 /* CACHED */)
                 ]))]))
-              : (loading.value === 'error' && !__props.cacheKey)
+              : (loading.value === 'error' && records.value.length === 0)
                 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_13$1, [
                     vue.createElementVNode("span", null, vue.toDisplayString(loading_error.value), 1 /* TEXT */)
                   ]))
                 : vue.createCommentVNode("v-if", true),
-            (loading.value === 'done' || __props.cacheKey)
+            (loading.value === 'done' || records.value.length > 0)
               ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 2 }, [
                   (!records.value || records.value.length === 0)
                     ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
@@ -6308,7 +6458,7 @@ return (_ctx, _cache) => {
                 ])
               ]),
               vue.createElementVNode("tbody", _hoisted_22, [
-                (loading.value === 'loading')
+                (loading.value === 'loading' && records.value.length === 0)
                   ? (vue.openBlock(), vue.createElementBlock("tr", _hoisted_23, [
                       vue.createElementVNode("td", {
                         colspan: 
@@ -6327,7 +6477,7 @@ return (_ctx, _cache) => {
                         ], -1 /* CACHED */)
                       ]))], 8 /* PROPS */, _hoisted_24)
                     ]))
-                  : (loading.value === 'error')
+                  : (loading.value === 'error' && records.value.length === 0)
                     ? (vue.openBlock(), vue.createElementBlock("tr", _hoisted_25, [
                         vue.createElementVNode("td", {
                           colspan: 
@@ -6358,7 +6508,7 @@ return (_ctx, _cache) => {
                         ? (vue.openBlock(true), vue.createElementBlock(vue.Fragment, { key: 3 }, vue.renderList(records.value, (record, index) => {
                             return (vue.openBlock(), vue.createElementBlock("tr", {
                               key: record.id,
-                              class: vue.normalizeClass(record.class),
+                              class: vue.normalizeClass([record.class, props.rowLink ? 'cursor-pointer' : '']),
                               onClick: $event => (rowSelected(record))
                             }, [
                               (activeMultiActions.value.length > 0)
@@ -6455,7 +6605,7 @@ return (_ctx, _cache) => {
                 (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(records.value, (record, index) => {
                   return (vue.openBlock(), vue.createElementBlock("div", {
                     key: record.id,
-                    class: "single-mobile-req bg-light p-3",
+                    class: vue.normalizeClass(["single-mobile-req bg-light p-3", props.rowLink ? 'cursor-pointer' : '']),
                     onClick: $event => (rowSelected(record))
                   }, [
                     (activeMultiActions.value.length > 0)
@@ -6560,7 +6710,7 @@ return (_ctx, _cache) => {
                           }, null, 8 /* PROPS */, ["actions", "record"])
                         ]))
                       : vue.createCommentVNode("v-if", true)
-                  ], 8 /* PROPS */, _hoisted_44))
+                  ], 10 /* CLASS, PROPS */, _hoisted_44))
                 }), 128 /* KEYED_FRAGMENT */))
               ]))
             : (vue.openBlock(), vue.createElementBlock("div", _hoisted_62, [
@@ -8397,8 +8547,8 @@ const ShFrontend = {
     }
     //filter unwanted config items from options to be put in local storage
     const removeKeys = ['formTextInput','router','shFormElementClasses'];
-    const allowKeys = [];
-    Object.keys(options).map(key=> ((!['string','integer','number'].includes(typeof options[key]) && !allowKeys.includes(key)) || removeKeys.includes(key)) && delete options[key]);
+    const allowKeys = ['enableTableCache'];
+    Object.keys(options).map(key=> ((!['string','integer','number','boolean'].includes(typeof options[key]) && !allowKeys.includes(key)) || removeKeys.includes(key)) && delete options[key]);
 
     shStorage.setItem('ShConfig',options);
   }

package/dist/library.mjs

@@ -5,10 +5,10 @@ import { Modal, Offcanvas } from 'bootstrap';
 import NProgress from 'nprogress';
 import { ref, computed, watch, onMounted, openBlock, createElementBlock, createElementVNode, createTextVNode, toDisplayString, createCommentVNode, withDirectives, Fragment, renderList, unref, vModelSelect, vModelText, normalizeClass, createBlock, resolveDynamicComponent, resolveComponent, inject, useTemplateRef, mergeProps, vShow, renderSlot, normalizeStyle, Teleport, createVNode, withCtx, useSlots, onBeforeUnmount, reactive, vModelCheckbox, withModifiers, resolveDirective, shallowRef, markRaw, isRef } from 'vue';
 import _ from 'lodash';
-import { useRoute, useRouter } from 'vue-router';
+import { useRouter, useRoute } from 'vue-router';
 import { defineStore, storeToRefs } from 'pinia';
 
-function setItem (key, value) {
+function setItem$1 (key, value) {
   let toStore = value;
   if (typeof value === 'object') {
     toStore = JSON.stringify(value);
@@ -16,20 +16,20 @@ function setItem (key, value) {
   return localStorage.setItem(key, toStore)
 }
 
-function getItem (key) {
+function getItem$1 (key) {
   try {
    return  JSON.parse(localStorage.getItem(key))
   } catch (err) {
     return localStorage.getItem(key)
   }
 }
-function removeItem (key) {
+function removeItem$1 (key) {
   return localStorage.removeItem(key)
 }
 var shStorage = {
-  setItem,
-  getItem,
-  removeItem
+  setItem: setItem$1,
+  getItem: getItem$1,
+  removeItem: removeItem$1
 };
 
 function swalSuccess(message){
@@ -5453,6 +5453,112 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
 script$e.render = render$1;
 script$e.__file = "src/lib/components/list_templates/Pagination.vue";
 
+const DB_NAME = 'ShTableCacheDB';
+const STORE_NAME = 'table_cache';
+const DB_VERSION = 1;
+
+let dbPromise = null;
+
+function getDB() {
+  if (dbPromise) return dbPromise;
+
+  dbPromise = new Promise((resolve, reject) => {
+    const request = indexedDB.open(DB_NAME, DB_VERSION);
+
+    request.onupgradeneeded = (event) => {
+      const db = event.target.result;
+      if (!db.objectStoreNames.contains(STORE_NAME)) {
+        db.createObjectStore(STORE_NAME);
+      }
+    };
+
+    request.onsuccess = (event) => {
+      resolve(event.target.result);
+    };
+
+    request.onerror = (event) => {
+      console.error('IndexedDB error:', event.target.error);
+      reject(event.target.error);
+    };
+  });
+
+  return dbPromise;
+}
+
+async function setItem(key, value) {
+  try {
+    const db = await getDB();
+    return new Promise((resolve, reject) => {
+      const transaction = db.transaction([STORE_NAME], 'readwrite');
+      const store = transaction.objectStore(STORE_NAME);
+      const request = store.put(value, key);
+
+      request.onsuccess = () => resolve();
+      request.onerror = (event) => reject(event.target.error);
+    });
+  } catch (error) {
+    console.error('ShIndexedDB setItem error:', error);
+  }
+}
+
+async function getItem(key, defaultValue = null) {
+  try {
+    const db = await getDB();
+    return new Promise((resolve, reject) => {
+      const transaction = db.transaction([STORE_NAME], 'readonly');
+      const store = transaction.objectStore(STORE_NAME);
+      const request = store.get(key);
+
+      request.onsuccess = (event) => {
+        resolve(event.target.result !== undefined ? event.target.result : defaultValue);
+      };
+      request.onerror = (event) => reject(event.target.error);
+    });
+  } catch (error) {
+    console.error('ShIndexedDB getItem error:', error);
+    return defaultValue;
+  }
+}
+
+async function removeItem(key) {
+  try {
+    const db = await getDB();
+    return new Promise((resolve, reject) => {
+      const transaction = db.transaction([STORE_NAME], 'readwrite');
+      const store = transaction.objectStore(STORE_NAME);
+      const request = store.delete(key);
+
+      request.onsuccess = () => resolve();
+      request.onerror = (event) => reject(event.target.error);
+    });
+  } catch (error) {
+    console.error('ShIndexedDB removeItem error:', error);
+  }
+}
+
+async function clear() {
+    try {
+        const db = await getDB();
+        return new Promise((resolve, reject) => {
+            const transaction = db.transaction([STORE_NAME], 'readwrite');
+            const store = transaction.objectStore(STORE_NAME);
+            const request = store.clear();
+
+            request.onsuccess = () => resolve();
+            request.onerror = (event) => reject(event.target.error);
+        });
+    } catch (error) {
+        console.error('ShIndexedDB clear error:', error);
+    }
+}
+
+var shIndexedDB = {
+  setItem,
+  getItem,
+  removeItem,
+  clear
+};
+
 const _hoisted_1$b = { class: "auto-table mt-2" };
 const _hoisted_2$8 = {
   key: 0,
@@ -5637,6 +5743,10 @@ var script$d = {
   selectedRange: [Object, null],
   noRecordsMessage: [String, null],
   multiActions: { type: Array, default: () => [] },
+  // Caching configuration: true to enable, false to disable. If null, respects global configure 'enableTableCache'
+  cache: { type: Boolean, default: null },
+  // Dynamic link for the entire row. Supports placeholders like '/user/{id}'
+  rowLink: [String, null],
 },
   emits: ["rowSelected", "dataReloaded", "dataLoaded"],
   setup(__props, { emit: __emit }) {
@@ -5695,7 +5805,7 @@ const hasRecordsSlot = computed(() => !!slots.records);
 const hasEmptySlot = computed(() => !!slots.empty);
 
 // --- Lifecycle
-onMounted(() => {
+onMounted(async () => {
   if (props.headers) tableHeaders.value = props.headers;
 
   if (props.actions?.actions) {
@@ -5704,7 +5814,7 @@ onMounted(() => {
     });
   }
 
-  if (props.cacheKey) setCachedData();
+  if (shouldCache.value) await setCachedData();
 
   reloadData();
 
@@ -5782,14 +5892,28 @@ const canvasClosed = () => {
   selectedRecord.value = null;
 };
 
+const router = useRouter();
 const rowSelected = (row) => {
   selectedRecord.value = null;
   setTimeout(() => {
     selectedRecord.value = row;
     emit("rowSelected", row);
+    if (props.rowLink) {
+      router.push(replaceRowLink(props.rowLink, row));
+    }
   }, 100);
 };
 
+const replaceRowLink = (p, obj) => {
+  let path = p;
+  const matches = path.match(/\{(.*?)\}/g);
+  matches?.forEach((k) => {
+    const key = k.replace("{", "").replace("}", "");
+    path = path.replace(`{${key}}`, obj[key]);
+  });
+  return path;
+};
+
 const changeKey = (key, value) => {
   if (key === "order_by") {
     order_by.value = value;
@@ -5930,20 +6054,46 @@ const exportData = () => {
     });
 };
 
-const setCachedData = () => {
-  if (props.cacheKey) {
-    records.value = shStorage.getItem("sh_table_cache_" + props.cacheKey, null);
+// Attempts to load data from IndexedDB before API call
+const setCachedData = async () => {
+  if (shouldCache.value) {
+    const cached = await shIndexedDB.getItem(computedCacheKey.value, null);
+    if (cached) {
+      records.value = cached;
+      // Set to 'done' immediately to show cached data without initial spinner
+      loading.value = "done";
+    }
   }
 };
 
+// Determines if caching should be active based on component props or global configuration
+const shouldCache = computed(() => {
+  if (props.cache !== null) return props.cache;
+  return shRepo.getShConfig("enableTableCache", false);
+});
+
+// Generates a unique, slug-safe key for IndexedDB storage
+const computedCacheKey = computed(() => {
+  if (props.cacheKey) return "sh_table_cache_" + props.cacheKey;
+  const keyBase = props.endPoint || props.query || "default";
+  const safeBase = keyBase.replace(/[^a-z0-9]/gi, "_").toLowerCase();
+  return "sh_table_cache_" + safeBase;
+});
+
 // Main loader
+// Main data fetcher. Handles background updates when cache is present
 const reloadData = (newPage, append) => {
   if (typeof newPage !== "undefined") page.value = newPage;
 
-  if (props.cacheKey && records.value !== null) {
+  // If we have cached data and not searching, we don't show the initial loading spinner
+  if (shouldCache.value && records.value && records.value.length > 0 && !filter_value.value) {
     loading.value = "done";
   } else if (!append) {
     loading.value = "loading";
+    // Clear records when searching to ensure we show fresh results
+    if (filter_value.value) {
+      records.value = [];
+    }
   }
 
   let data = {
@@ -5982,8 +6132,8 @@ const reloadData = (newPage, append) => {
       const response = req.data.data;
       emit("dataLoaded", response);
 
-      if (page.value < 2 && props.cacheKey) {
-        shStorage.setItem("sh_table_cache_" + props.cacheKey, response.data);
+      if (page.value < 2 && shouldCache.value) {
+        shIndexedDB.setItem(computedCacheKey.value, response.data);
       }
 
       pagination_data.value = {
@@ -6168,7 +6318,7 @@ return (_ctx, _cache) => {
       : createCommentVNode("v-if", true),
     (hasDefaultSlot.value)
       ? (openBlock(), createElementBlock(Fragment, { key: 2 }, [
-          (loading.value === 'loading')
+          (loading.value === 'loading' && records.value.length === 0)
             ? (openBlock(), createElementBlock("div", _hoisted_9$2, [...(_cache[13] || (_cache[13] = [
                 createElementVNode("div", {
                   class: "spinner-border",
@@ -6177,12 +6327,12 @@ return (_ctx, _cache) => {
                   createElementVNode("span", { class: "visually-hidden" }, "Loading...")
                 ], -1 /* CACHED */)
               ]))]))
-            : (loading.value === 'error')
+            : (loading.value === 'error' && records.value.length === 0)
               ? (openBlock(), createElementBlock("div", _hoisted_10$2, [
                   createElementVNode("span", null, toDisplayString(loading_error.value), 1 /* TEXT */)
                 ]))
               : createCommentVNode("v-if", true),
-          (loading.value === 'done')
+          (loading.value === 'done' || records.value.length > 0)
             ? (openBlock(), createElementBlock(Fragment, { key: 2 }, [
                 (records.value.length === 0)
                   ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
@@ -6206,7 +6356,7 @@ return (_ctx, _cache) => {
         ], 64 /* STABLE_FRAGMENT */))
       : (hasRecordsSlot.value)
         ? (openBlock(), createElementBlock(Fragment, { key: 3 }, [
-            (loading.value === 'loading' && !__props.cacheKey)
+            (loading.value === 'loading' && records.value.length === 0)
               ? (openBlock(), createElementBlock("div", _hoisted_12$1, [...(_cache[15] || (_cache[15] = [
                   createElementVNode("div", {
                     class: "spinner-border",
@@ -6215,12 +6365,12 @@ return (_ctx, _cache) => {
                     createElementVNode("span", { class: "visually-hidden" }, "Loading...")
                   ], -1 /* CACHED */)
                 ]))]))
-              : (loading.value === 'error' && !__props.cacheKey)
+              : (loading.value === 'error' && records.value.length === 0)
                 ? (openBlock(), createElementBlock("div", _hoisted_13$1, [
                     createElementVNode("span", null, toDisplayString(loading_error.value), 1 /* TEXT */)
                   ]))
                 : createCommentVNode("v-if", true),
-            (loading.value === 'done' || __props.cacheKey)
+            (loading.value === 'done' || records.value.length > 0)
               ? (openBlock(), createElementBlock(Fragment, { key: 2 }, [
                   (!records.value || records.value.length === 0)
                     ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
@@ -6297,7 +6447,7 @@ return (_ctx, _cache) => {
                 ])
               ]),
               createElementVNode("tbody", _hoisted_22, [
-                (loading.value === 'loading')
+                (loading.value === 'loading' && records.value.length === 0)
                   ? (openBlock(), createElementBlock("tr", _hoisted_23, [
                       createElementVNode("td", {
                         colspan: 
@@ -6316,7 +6466,7 @@ return (_ctx, _cache) => {
                         ], -1 /* CACHED */)
                       ]))], 8 /* PROPS */, _hoisted_24)
                     ]))
-                  : (loading.value === 'error')
+                  : (loading.value === 'error' && records.value.length === 0)
                     ? (openBlock(), createElementBlock("tr", _hoisted_25, [
                         createElementVNode("td", {
                           colspan: 
@@ -6347,7 +6497,7 @@ return (_ctx, _cache) => {
                         ? (openBlock(true), createElementBlock(Fragment, { key: 3 }, renderList(records.value, (record, index) => {
                             return (openBlock(), createElementBlock("tr", {
                               key: record.id,
-                              class: normalizeClass(record.class),
+                              class: normalizeClass([record.class, props.rowLink ? 'cursor-pointer' : '']),
                               onClick: $event => (rowSelected(record))
                             }, [
                               (activeMultiActions.value.length > 0)
@@ -6444,7 +6594,7 @@ return (_ctx, _cache) => {
                 (openBlock(true), createElementBlock(Fragment, null, renderList(records.value, (record, index) => {
                   return (openBlock(), createElementBlock("div", {
                     key: record.id,
-                    class: "single-mobile-req bg-light p-3",
+                    class: normalizeClass(["single-mobile-req bg-light p-3", props.rowLink ? 'cursor-pointer' : '']),
                     onClick: $event => (rowSelected(record))
                   }, [
                     (activeMultiActions.value.length > 0)
@@ -6549,7 +6699,7 @@ return (_ctx, _cache) => {
                           }, null, 8 /* PROPS */, ["actions", "record"])
                         ]))
                       : createCommentVNode("v-if", true)
-                  ], 8 /* PROPS */, _hoisted_44))
+                  ], 10 /* CLASS, PROPS */, _hoisted_44))
                 }), 128 /* KEYED_FRAGMENT */))
               ]))
             : (openBlock(), createElementBlock("div", _hoisted_62, [
@@ -8386,8 +8536,8 @@ const ShFrontend = {
     }
     //filter unwanted config items from options to be put in local storage
     const removeKeys = ['formTextInput','router','shFormElementClasses'];
-    const allowKeys = [];
-    Object.keys(options).map(key=> ((!['string','integer','number'].includes(typeof options[key]) && !allowKeys.includes(key)) || removeKeys.includes(key)) && delete options[key]);
+    const allowKeys = ['enableTableCache'];
+    Object.keys(options).map(key=> ((!['string','integer','number','boolean'].includes(typeof options[key]) && !allowKeys.includes(key)) || removeKeys.includes(key)) && delete options[key]);
 
     shStorage.setItem('ShConfig',options);
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@iankibetsh/shframework",
-  "version": "5.8.3",
+  "version": "5.8.4",
   "description": "Vue library for handling laravel backend",
   "repository": {
     "type": "git",