Merge pull request #92 from HC200ok/Fix/expand-loading

fix expand row after pageItems updates

Author: HC200ok

package.json

@@ -3,7 +3,7 @@
   "author": "HC200ok",
   "description": "A customizable and easy-to-use data table component made with Vue.js 3.x.",
   "private": false,
-  "version": "1.4.5",
+  "version": "1.4.11",
   "types": "./types/main.d.ts",
   "license": "MIT",
   "files": [

src/App.vue

@@ -2,9 +2,12 @@
   <ServerSideMode />
   <br><br>
   <ClientMode />
+  <br><br>
+  <ExpandLoading/>
 </template>
 
 <script setup lang="ts">
 import ServerSideMode from './modes/ServerSide.vue';
 import ClientMode from './modes/Client.vue';
+import ExpandLoading from './modes/ExpandLoading.vue';
 </script>

src/components/DataTable.vue

@@ -421,6 +421,7 @@ const {
 const {
   expandingItemIndexList,
   updateExpandingItemIndexList,
+  clearExpandingItemIndexList,
 } = useExpandableRow(
   items,
   emits,
@@ -463,6 +464,7 @@ watch(loading, (newVal, oldVal) => {
     // in server-side mode, turn to next page when api request finished.
     if (newVal === false && oldVal === true) {
       updateCurrentPaginationNumber(serverOptionsComputed.value.page);
+      clearExpandingItemIndexList();
     }
   }
 });
@@ -479,6 +481,10 @@ watch(rowsPerPageRef, (value) => {
   }
 });
 
+watch([currentPaginationNumber, clientSortOptions, searchField, searchValue, filterOptions], () => {
+  clearExpandingItemIndexList();
+}, { deep: true });
+
 defineExpose({
   currentPageFirstIndex,
   currentPageLastIndex,
@@ -549,3 +555,4 @@ defineExpose({
   height: v-bind(tableHeightPx);
 }
 </style>
+

src/hooks/useExpandableRow.ts

@@ -19,8 +19,13 @@ export default function useExpandableRow(
     }
   };
 
+  const clearExpandingItemIndexList = () => {
+    expandingItemIndexList.value = [];
+  };
+
   return {
     expandingItemIndexList,
     updateExpandingItemIndexList,
+    clearExpandingItemIndexList,
   };
 }

src/modes/Client.vue

@@ -1,4 +1,14 @@
 <template>
+  <span>search field:</span>
+  <select v-model="searchField">
+    <option>name</option>
+    <option>height</option>
+  </select>
+  
+  <br/>
+
+  <span>search value: </span>
+  <input type="text" v-model="searchValue">
   <div>
     <DataTable
       ref="dataTable"

src/modes/ExpandLoading.vue

@@ -0,0 +1,59 @@
+<template>
+  <DataTable
+    :headers="headers"
+    :items="items"
+    @expand-row="loadIntroduction"
+  >
+    <template #expand="item">
+      <div
+        v-if="item.introduction"
+        style="padding: 15px"
+      >
+        {{ item.introduction }}
+      </div>
+    </template>
+  </DataTable>
+</template>
+
+<script lang="ts" setup>
+import {
+  computed, ref, reactive, toRefs,
+} from 'vue';
+import type {
+  Header, Item, FilterOption, ClickRowArgument, HeaderItemClassNameFunction, BodyItemClassNameFunction, BodyRowClassNameFunction,
+} from '../types/main';
+import DataTable from '../components/DataTable.vue';
+
+import { mockClientNestedItems, mockClientItems, mockDuplicateClientNestedItems } from '../mock';
+const headers: Header[] = [
+  { text: 'PLAYER', value: 'player' },
+  { text: 'TEAM', value: 'team', sortable: true },
+];
+
+const items = ref<Item[]>([
+  { player: 'Stephen Curry', team: 'GSW' },
+  { player: 'Lebron James', team: 'LAL' },
+  { player: 'Kevin Durant', team: 'BKN' },
+  { player: 'Giannis Antetokounmpo', team: 'MIL' },
+]);
+
+const mockItemIntroduction = async (name: string): Promise<string> => {
+  await new Promise((s) => setTimeout(s, 2000));
+  const introduction: Record<string, string> = {
+    'Stephen Curry': 'Wardell Stephen Curry II is an American professional basketball player for the Golden State Warriors of the National Basketball Association (NBA).',
+    'Lebron James': 'LeBron Raymone James Sr is an American professional basketball player for the Los Angeles Lakers of the National Basketball Association (NBA).',
+    'Kevin Durant': 'Kevin Wayne Durant also known by his initials KD, is an American professional basketball player for the Brooklyn Nets of the National Basketball Association (NBA).',
+    'Giannis Antetokounmpo': 'Giannis Sina Ugo Antetokounmpo (né Adetokunbo; December 6, 1994) is a Greek-Nigerian professional basketball player for the Milwaukee Bucks of the National Basketball Association (NBA).',
+  };
+  return introduction[name];
+};
+
+const loadIntroduction = async (index: number): Promise<void> => {
+  const expandedItem = items.value[index];
+  if (!expandedItem.introduction) {
+    expandedItem.expandLoading = true;
+    expandedItem.introduction = await mockItemIntroduction(expandedItem.player);
+    expandedItem.expandLoading = false;
+  }
+};
+</script>

src/modes/ServerSide.vue

@@ -25,6 +25,11 @@
       theme-color="#1d90ff"
       border-cell
     >
+      <template #expand="item">
+        <div style="padding: 15px">
+          {{ item.name }} won championships
+        </div>
+      </template>
       <template #address="{ address }">
         <a :href="address">{{ address }}</a>
       </template>