From 1a34ba46f95b9a3caba247b7885e017548cfb53a Mon Sep 17 00:00:00 2001
From: luis <sincorreo@no.net>
Date: Fri, 23 May 2025 16:15:41 -0600
Subject: [PATCH] fix: reset page when filtering reduces items and page is
 invalid

---
 src/components/DataTable.vue | 481 ++++++++++++++++++-----------------
 1 file changed, 254 insertions(+), 227 deletions(-)

diff --git a/src/components/DataTable.vue b/src/components/DataTable.vue
index e51b2ab..e02d7dc 100644
--- a/src/components/DataTable.vue
+++ b/src/components/DataTable.vue
@@ -1,9 +1,5 @@
 <template>
-  <div
-    ref="dataTable"
-    class="vue3-easy-data-table"
-    :class="[tableClassName]"
-  >
+  <div ref="dataTable" class="vue3-easy-data-table" :class="[tableClassName]">
     <div
       ref="tableBody"
       class="vue3-easy-data-table__main"
@@ -12,7 +8,7 @@
         'fixed-height': tableHeight,
         'show-shadow': showShadow,
         'table-fixed': fixedHeaders.length,
-        'hoverable': !noHover,
+        hoverable: !noHover,
         'border-cell': borderCell,
       }"
     >
@@ -24,10 +20,7 @@
             :style="getColStyle(header)"
           />
         </colgroup>
-        <slot
-          v-if="slots['customize-headers']"
-          name="customize-headers"
-        />
+        <slot v-if="slots['customize-headers']" name="customize-headers" />
         <thead
           v-else-if="headersForRender.length && !hideHeader"
           class="vue3-easy-data-table__header"
@@ -46,7 +39,11 @@
               // eslint-disable-next-line max-len
               }, typeof headerItemClassName === 'string' ? headerItemClassName : headerItemClassName(header as Header, index + 1)]"
               :style="getFixedDistance(header.value)"
-              @click.stop="(header.sortable && header.sortType) ? updateSortField(header.value, header.sortType) : null"
+              @click.stop="
+                header.sortable && header.sortType
+                  ? updateSortField(header.value, header.sortType)
+                  : null
+              "
             >
               <MultipleSelectCheckBox
                 v-if="header.text === 'checkbox'"
@@ -73,18 +70,15 @@
                   v-else-if="slots['header']"
                   name="header"
                   v-bind="header"
-                />   
-                <span
-                  v-else
-                  class="header-text"
-                >
+                />
+                <span v-else class="header-text">
                   {{ header.text }}
                 </span>
                 <i
                   v-if="header.sortable"
                   :key="header.sortType ? header.sortType : 'none'"
                   class="sortType-icon"
-                  :class="{'desc': header.sortType === 'desc'}"
+                  :class="{ desc: header.sortType === 'desc' }"
                 ></i>
                 <span
                   v-if="multiSort && isMultiSorting(header.value)"
@@ -96,15 +90,11 @@
             </th>
           </tr>
         </thead>
-        <slot
-          v-if="ifHasBodySlot"
-          name="body"
-          v-bind="pageItems"
-        />
+        <slot v-if="ifHasBodySlot" name="body" v-bind="pageItems" />
         <tbody
           v-else-if="headerColumns.length"
           class="vue3-easy-data-table__body"
-          :class="{'row-alternation': alternating}"
+          :class="{ 'row-alternation': alternating }"
         >
           <slot
             name="body-prepend"
@@ -116,36 +106,66 @@
                 currentPaginationNumber,
                 maxPaginationNumber,
                 nextPage,
-                prevPage
+                prevPage,
               },
-              headers: headersForRender
+              headers: headersForRender,
             }"
           />
-          <template
-            v-for="(item, index) in pageItems"
-            :key="index"
-          >
+          <template v-for="(item, index) in pageItems" :key="index">
             <tr
-              :class="[{'even-row': (index + 1) % 2 === 0},
-                       typeof bodyRowClassName === 'string' ? bodyRowClassName : bodyRowClassName(item, index + 1)]"
-              @click="($event) => {
-                clickRow(item, 'single', $event);
-                clickRowToExpand && updateExpandingItemIndexList(index + prevPageEndIndex, item, $event);
-              }"
-              @dblclick="($event) => {clickRow(item, 'double', $event)}"
-              @contextmenu="($event) => {contextMenuRow(item, $event)}"
+              :class="[
+                { 'even-row': (index + 1) % 2 === 0 },
+                typeof bodyRowClassName === 'string'
+                  ? bodyRowClassName
+                  : bodyRowClassName(item, index + 1),
+              ]"
+              @click="
+                ($event) => {
+                  clickRow(item, 'single', $event);
+                  clickRowToExpand &&
+                    updateExpandingItemIndexList(
+                      index + prevPageEndIndex,
+                      item,
+                      $event
+                    );
+                }
+              "
+              @dblclick="
+                ($event) => {
+                  clickRow(item, 'double', $event);
+                }
+              "
+              @contextmenu="
+                ($event) => {
+                  contextMenuRow(item, $event);
+                }
+              "
             >
               <td
                 v-for="(column, i) in headerColumns"
                 :key="i"
                 :style="getFixedDistance(column, 'td')"
-                :class="[{
-                  'shadow': column === lastFixedColumn,
-                  'can-expand': column === 'expand',
-                // eslint-disable-next-line max-len
-                }, typeof bodyItemClassName === 'string' ? bodyItemClassName : bodyItemClassName(column, index + 1), `direction-${bodyTextDirection}`]"
-                @click="column === 'expand' ? updateExpandingItemIndexList(index + prevPageEndIndex, item, $event) : null"
-              > 
+                :class="[
+                  {
+                    shadow: column === lastFixedColumn,
+                    'can-expand': column === 'expand',
+                    // eslint-disable-next-line max-len
+                  },
+                  typeof bodyItemClassName === 'string'
+                    ? bodyItemClassName
+                    : bodyItemClassName(column, index + 1),
+                  `direction-${bodyTextDirection}`,
+                ]"
+                @click="
+                  column === 'expand'
+                    ? updateExpandingItemIndexList(
+                        index + prevPageEndIndex,
+                        item,
+                        $event
+                      )
+                    : null
+                "
+              >
                 <slot
                   v-if="slots[`item-${column}`]"
                   :name="`item-${column}`"
@@ -159,7 +179,11 @@
                 <template v-else-if="column === 'expand'">
                   <i
                     class="expand-icon"
-                    :class="{'expanding': expandingItemIndexList.includes(prevPageEndIndex + index)}"
+                    :class="{
+                      expanding: expandingItemIndexList.includes(
+                        prevPageEndIndex + index
+                      ),
+                    }"
                   />
                 </template>
                 <template v-else-if="column === 'checkbox'">
@@ -171,7 +195,7 @@
                 <slot
                   v-else-if="slots['item']"
                   name="item"
-                  v-bind="{column, item}"
+                  v-bind="{ column, item }"
                 />
                 <template v-else>
                   {{ generateColumnContent(column, item) }}
@@ -179,22 +203,20 @@
               </td>
             </tr>
             <tr
-              v-if="ifHasExpandSlot && expandingItemIndexList.includes(index + prevPageEndIndex)"
-              :class="[{'even-row': (index + 1) % 2 === 0},
-                       typeof bodyExpandRowClassName === 'string' ? bodyExpandRowClassName : bodyExpandRowClassName(item, index + 1)]"
+              v-if="
+                ifHasExpandSlot &&
+                expandingItemIndexList.includes(index + prevPageEndIndex)
+              "
+              :class="[
+                { 'even-row': (index + 1) % 2 === 0 },
+                typeof bodyExpandRowClassName === 'string'
+                  ? bodyExpandRowClassName
+                  : bodyExpandRowClassName(item, index + 1),
+              ]"
             >
-              <td
-                :colspan="headersForRender.length"
-                class="expand"
-              >
-                <LoadingLine
-                  v-if="item.expandLoading"
-                  class="expand-loading"
-                />
-                <slot
-                  name="expand"
-                  v-bind="item"
-                />
+              <td :colspan="headersForRender.length" class="expand">
+                <LoadingLine v-if="item.expandLoading" class="expand-loading" />
+                <slot name="expand" v-bind="item" />
               </td>
             </tr>
           </template>
@@ -209,25 +231,17 @@
                 maxPaginationNumber,
                 nextPage,
                 prevPage,
-                updatePage
+                updatePage,
               },
-              headers: headersForRender
+              headers: headersForRender,
             }"
           />
         </tbody>
       </table>
-      <div
-        v-if="loading"
-        class="vue3-easy-data-table__loading"
-      >
-        <div
-          class="vue3-easy-data-table__loading-mask "
-        ></div>
+      <div v-if="loading" class="vue3-easy-data-table__loading">
+        <div class="vue3-easy-data-table__loading-mask"></div>
         <div class="loading-entity">
-          <slot
-            v-if="ifHasLoadingSlot"
-            name="loading"
-          />
+          <slot v-if="ifHasLoadingSlot" name="loading" />
           <Loading v-else></Loading>
         </div>
       </div>
@@ -241,14 +255,8 @@
         </slot>
       </div>
     </div>
-    <div
-      v-if="!hideFooter"
-      class="vue3-easy-data-table__footer"
-    >
-      <div
-        v-if="!hideRowsPerPage"
-        class="pagination__rows-per-page"
-      >
+    <div v-if="!hideFooter" class="vue3-easy-data-table__footer">
+      <div v-if="!hideRowsPerPage" class="pagination__rows-per-page">
         {{ rowsPerPageMessage }}
         <RowsSelector
           v-model="rowsPerPageRef"
@@ -278,10 +286,7 @@
         @click-next-page="nextPage"
         @click-prev-page="prevPage"
       >
-        <template
-          v-if="buttonsPagination"
-          #buttonsPagination
-        >
+        <template v-if="buttonsPagination" #buttonsPagination>
           <ButtonsPagination
             :current-pagination-number="currentPaginationNumber"
             :max-pagination-number="maxPaginationNumber"
@@ -295,33 +300,40 @@
 
 <script setup lang="ts">
 import {
-  useSlots, computed, toRefs, ref, watch, provide, onMounted, PropType,
-} from 'vue';
-
-import MultipleSelectCheckBox from './MultipleSelectCheckBox.vue';
-import SingleSelectCheckBox from './SingleSelectCheckBox.vue';
-import RowsSelector from './RowsSelector.vue';
-import Loading from './Loading.vue';
-import LoadingLine from './LoadingLine.vue';
-import ButtonsPagination from './ButtonsPagination.vue';
-import PaginationArrows from './PaginationArrows.vue';
-
-import useClickRow from '../hooks/useClickRow';
-import useExpandableRow from '../hooks/useExpandableRow';
-import useFixedColumn from '../hooks/useFixedColumn';
-import useHeaders from '../hooks/useHeaders';
-import usePageItems from '../hooks/usePageItems';
-import usePagination from '../hooks/usePagination';
-import useRows from '../hooks/useRows';
-import useServerOptions from '../hooks/useServerOptions';
-import useTotalItems from '../hooks/useTotalItems';
-
-import type { Header, Item } from '../types/main';
-import type { HeaderForRender } from '../types/internal';
+  useSlots,
+  computed,
+  toRefs,
+  ref,
+  watch,
+  provide,
+  onMounted,
+  PropType,
+} from "vue";
+
+import MultipleSelectCheckBox from "./MultipleSelectCheckBox.vue";
+import SingleSelectCheckBox from "./SingleSelectCheckBox.vue";
+import RowsSelector from "./RowsSelector.vue";
+import Loading from "./Loading.vue";
+import LoadingLine from "./LoadingLine.vue";
+import ButtonsPagination from "./ButtonsPagination.vue";
+import PaginationArrows from "./PaginationArrows.vue";
+
+import useClickRow from "../hooks/useClickRow";
+import useExpandableRow from "../hooks/useExpandableRow";
+import useFixedColumn from "../hooks/useFixedColumn";
+import useHeaders from "../hooks/useHeaders";
+import usePageItems from "../hooks/usePageItems";
+import usePagination from "../hooks/usePagination";
+import useRows from "../hooks/useRows";
+import useServerOptions from "../hooks/useServerOptions";
+import useTotalItems from "../hooks/useTotalItems";
+
+import type { Header, Item } from "../types/main";
+import type { HeaderForRender } from "../types/internal";
 
 // eslint-disable-next-line import/extensions
-import { generateColumnContent } from '../utils';
-import propsWithDefault from '../propsWithDefault';
+import { generateColumnContent } from "../utils";
+import propsWithDefault from "../propsWithDefault";
 
 const props = defineProps({
   ...propsWithDefault,
@@ -369,15 +381,17 @@ const {
   themeColor,
   rowsOfPageSeparatorMessage,
   showIndexSymbol,
-  preventContextMenuRow
+  preventContextMenuRow,
 } = toRefs(props);
 
 // style related computed variables
-const tableHeightPx = computed(() => (tableHeight.value ? `${tableHeight.value}px` : null));
+const tableHeightPx = computed(() =>
+  tableHeight.value ? `${tableHeight.value}px` : null
+);
 const tableMinHeightPx = computed(() => `${tableMinHeight.value}px`);
 
 // global style related variable
-provide('themeColor', themeColor.value);
+provide("themeColor", themeColor.value);
 
 // slot
 const slots = useSlots();
@@ -389,32 +403,34 @@ const ifHasBodySlot = computed(() => !!slots.body);
 // global dataTable $ref
 const dataTable = ref();
 const tableBody = ref();
-provide('dataTable', dataTable);
+provide("dataTable", dataTable);
 
 // fixed-columns shadow
 const showShadow = ref(false);
 onMounted(() => {
-  tableBody.value.addEventListener('scroll', () => {
+  tableBody.value.addEventListener("scroll", () => {
     showShadow.value = tableBody.value.scrollLeft > 0;
   });
 });
 
 const emits = defineEmits([
-  'clickRow',
-  'contextmenuRow',
-  'selectRow',
-  'deselectRow',
-  'expandRow',
-  'updateSort',
-  'updateFilter',
-  'update:itemsSelected',
-  'update:serverOptions',
-  'updatePageItems',
-  'updateTotalItems',
-  'selectAll'
+  "clickRow",
+  "contextmenuRow",
+  "selectRow",
+  "deselectRow",
+  "expandRow",
+  "updateSort",
+  "updateFilter",
+  "update:itemsSelected",
+  "update:serverOptions",
+  "updatePageItems",
+  "updateTotalItems",
+  "selectAll",
 ]);
 
-const isMultipleSelectable = computed((): boolean => itemsSelected.value !== null);
+const isMultipleSelectable = computed(
+  (): boolean => itemsSelected.value !== null
+);
 const isServerSideMode = computed((): boolean => serverOptions.value !== null);
 
 const {
@@ -422,11 +438,7 @@ const {
   updateServerOptionsPage,
   updateServerOptionsSort,
   updateServerOptionsRowsPerPage,
-} = useServerOptions(
-  serverOptions,
-  multiSort,
-  emits,
-);
+} = useServerOptions(serverOptions, multiSort, emits);
 
 const {
   clientSortOptions,
@@ -454,18 +466,14 @@ const {
   sortType,
   multiSort,
   updateServerOptionsSort,
-  emits,
+  emits
 );
 
-const {
-  rowsItemsComputed,
-  rowsPerPageRef,
-  updateRowsPerPage,
-} = useRows(
+const { rowsItemsComputed, rowsPerPageRef, updateRowsPerPage } = useRows(
   isServerSideMode,
   rowsItems,
   serverOptions,
-  rowsPerPage,
+  rowsPerPage
 );
 
 const {
@@ -484,7 +492,7 @@ const {
   searchValue,
   serverItemsLength,
   multiSort,
-  emits,
+  emits
 );
 
 const {
@@ -503,7 +511,7 @@ const {
   totalItemsLength,
   rowsPerPageRef,
   serverOptions,
-  updateServerOptionsPage,
+  updateServerOptionsPage
 );
 
 const {
@@ -520,7 +528,7 @@ const {
   selectItemsComputed,
   showIndex,
   totalItems,
-  totalItemsLength,
+  totalItemsLength
 );
 
 const prevPageEndIndex = computed(() => {
@@ -532,33 +540,22 @@ const {
   expandingItemIndexList,
   updateExpandingItemIndexList,
   clearExpandingItemIndexList,
-} = useExpandableRow(
-  pageItems,
-  prevPageEndIndex,
-  emits,
-);
+} = useExpandableRow(pageItems, prevPageEndIndex, emits);
 
-const {
-  fixedHeaders,
-  lastFixedColumn,
-  fixedColumnsInfos,
-} = useFixedColumn(
-  headersForRender,
-);
+const { fixedHeaders, lastFixedColumn, fixedColumnsInfos } =
+  useFixedColumn(headersForRender);
 
-const {
-  clickRow,
-} = useClickRow(
+const { clickRow } = useClickRow(
   clickEventType,
   isMultipleSelectable,
   showIndex,
-  emits,
+  emits
 );
 
 const contextMenuRow = (item: Item, $event: MouseEvent) => {
   if (preventContextMenuRow.value) $event.preventDefault();
-  emits('contextmenuRow', item, $event);
-}
+  emits("contextmenuRow", item, $event);
+};
 
 // template style generation function
 const getColStyle = (header: HeaderForRender): string | undefined => {
@@ -567,11 +564,15 @@ const getColStyle = (header: HeaderForRender): string | undefined => {
   return undefined;
 };
 
-const getFixedDistance = (column: string, type: 'td' | 'th' = 'th') => {
+const getFixedDistance = (column: string, type: "td" | "th" = "th") => {
   if (!fixedHeaders.value.length) return undefined;
-  const columInfo = fixedColumnsInfos.value.find((info) => info.value === column);
+  const columInfo = fixedColumnsInfos.value.find(
+    (info) => info.value === column
+  );
   if (columInfo) {
-    return `left: ${columInfo.distance}px;z-index: ${type === 'th' ? 3 : 1};position: sticky;`;
+    return `left: ${columInfo.distance}px;z-index: ${
+      type === "th" ? 3 : 1
+    };position: sticky;`;
   }
   return undefined;
 };
@@ -594,24 +595,51 @@ watch(rowsPerPageRef, (value) => {
   }
 });
 
+watch(
+  () => [items.value.length, rowsPerPageRef.value],
+  () => {
+    const maxPage = Math.ceil(items.value.length / rowsPerPageRef.value);
+    if (currentPaginationNumber.value > maxPage && maxPage > 0) {
+      updatePage(1);
+    }
+  }
+);
+
 watch([searchValue, filterOptions], () => {
   if (!isServerSideMode.value) {
     updatePage(1);
   }
 });
 
-watch([currentPaginationNumber, clientSortOptions, searchField, searchValue, filterOptions], () => {
-  clearExpandingItemIndexList();
-}, { deep: true });
-
-watch(pageItems, (value) => {
-  emits('updatePageItems', value);
-}, { deep: true });
+watch(
+  [
+    currentPaginationNumber,
+    clientSortOptions,
+    searchField,
+    searchValue,
+    filterOptions,
+  ],
+  () => {
+    clearExpandingItemIndexList();
+  },
+  { deep: true }
+);
 
-watch(totalItems, (value) => {
-  emits('updateTotalItems', value);
-}, { deep: true });
+watch(
+  pageItems,
+  (value) => {
+    emits("updatePageItems", value);
+  },
+  { deep: true }
+);
 
+watch(
+  totalItems,
+  (value) => {
+    emits("updateTotalItems", value);
+  },
+  { deep: true }
+);
 
 defineExpose({
   currentPageFirstIndex,
@@ -628,64 +656,63 @@ defineExpose({
   rowsPerPageActiveOption: rowsPerPageRef,
   updateRowsPerPageActiveOption: updateRowsPerPage,
 });
-
 </script>
 
 <style>
-  :root {
-    /*table*/
-    --easy-table-border: 1px solid #e0e0e0;
-    --easy-table-row-border: 1px solid #e0e0e0;
-    /*header-row*/
-    --easy-table-header-font-size: 12px;
-    --easy-table-header-height: 36px;
-    --easy-table-header-font-color: #373737;
-    --easy-table-header-background-color: #fff;
-    /*header-item*/
-    --easy-table-header-item-padding: 0px 10px;
-    /*body-row*/
-    --easy-table-body-row-height: 36px;
-    --easy-table-body-row-font-size: 12px;
-
-    --easy-table-body-row-font-color: #212121;
-    --easy-table-body-row-background-color: #fff;
-
-    --easy-table-body-row-hover-font-color: #212121;
-    --easy-table-body-row-hover-background-color: #eee;
-
-    --easy-table-body-even-row-font-color: #212121;
-    --easy-table-body-even-row-background-color: #fafafa;
-    /*body-item*/
-    --easy-table-body-item-padding: 0px 10px;
-    /*footer*/
-    --easy-table-footer-background-color: #fff;
-    --easy-table-footer-font-color: #212121;
-    --easy-table-footer-font-size: 12px;
-    --easy-table-footer-padding: 0px 5px;
-    --easy-table-footer-height: 36px;
-    /**footer-rowsPerPage**/
-    --easy-table-rows-per-page-selector-width: auto;
-    --easy-table-rows-per-page-selector-option-padding: 5px;
-    --easy-table-rows-per-page-selector-z-index: auto;
-    /*message*/
-    --easy-table-message-font-color: #212121;
-    --easy-table-message-font-size: 12px;
-    --easy-table-message-padding: 20px;
-    /*loading-mask*/
-    --easy-table-loading-mask-background-color: #fff;
-    --easy-table-loading-mask-opacity: 0.5;
-    /*scroll-bar*/
-    --easy-table-scrollbar-track-color: #fff;
-    --easy-table-scrollbar-color: #fff;
-    --easy-table-scrollbar-thumb-color: #c1c1c1;
-    --easy-table-scrollbar-corner-color: #fff;
-    /*buttons-pagination*/
-    --easy-table-buttons-pagination-border: 1px solid #e0e0e0;
-  }
+:root {
+  /*table*/
+  --easy-table-border: 1px solid #e0e0e0;
+  --easy-table-row-border: 1px solid #e0e0e0;
+  /*header-row*/
+  --easy-table-header-font-size: 12px;
+  --easy-table-header-height: 36px;
+  --easy-table-header-font-color: #373737;
+  --easy-table-header-background-color: #fff;
+  /*header-item*/
+  --easy-table-header-item-padding: 0px 10px;
+  /*body-row*/
+  --easy-table-body-row-height: 36px;
+  --easy-table-body-row-font-size: 12px;
+
+  --easy-table-body-row-font-color: #212121;
+  --easy-table-body-row-background-color: #fff;
+
+  --easy-table-body-row-hover-font-color: #212121;
+  --easy-table-body-row-hover-background-color: #eee;
+
+  --easy-table-body-even-row-font-color: #212121;
+  --easy-table-body-even-row-background-color: #fafafa;
+  /*body-item*/
+  --easy-table-body-item-padding: 0px 10px;
+  /*footer*/
+  --easy-table-footer-background-color: #fff;
+  --easy-table-footer-font-color: #212121;
+  --easy-table-footer-font-size: 12px;
+  --easy-table-footer-padding: 0px 5px;
+  --easy-table-footer-height: 36px;
+  /**footer-rowsPerPage**/
+  --easy-table-rows-per-page-selector-width: auto;
+  --easy-table-rows-per-page-selector-option-padding: 5px;
+  --easy-table-rows-per-page-selector-z-index: auto;
+  /*message*/
+  --easy-table-message-font-color: #212121;
+  --easy-table-message-font-size: 12px;
+  --easy-table-message-padding: 20px;
+  /*loading-mask*/
+  --easy-table-loading-mask-background-color: #fff;
+  --easy-table-loading-mask-opacity: 0.5;
+  /*scroll-bar*/
+  --easy-table-scrollbar-track-color: #fff;
+  --easy-table-scrollbar-color: #fff;
+  --easy-table-scrollbar-thumb-color: #c1c1c1;
+  --easy-table-scrollbar-corner-color: #fff;
+  /*buttons-pagination*/
+  --easy-table-buttons-pagination-border: 1px solid #e0e0e0;
+}
 </style>
 
 <style lang="scss" scoped>
-@import '../scss/vue3-easy-data-table.scss';
+@import "../scss/vue3-easy-data-table.scss";
 
 .vue3-easy-data-table__main {
   min-height: v-bind(tableMinHeightPx);