vue3-easy-data-table - npm Package Compare versions

Comparing version 1.3.17 to 1.4.0

dist/vue3-easy-data-table.es.js

@@ -20,3 +20,3 @@ var __defProp = Object.defineProperty;
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-import { defineComponent, useCssVars, unref, computed, inject, openBlock, createElementBlock, withModifiers, createElementVNode, normalizeClass, pushScopeId, popScopeId, ref, watch, onMounted, onBeforeUnmount, toDisplayString, Fragment, renderList, useSlots, renderSlot, createCommentVNode, provide, toRefs, normalizeStyle, createBlock, normalizeProps, mergeProps, createTextVNode, guardReactiveProps, createVNode, createSlots, withCtx } from "vue";
+import { defineComponent, useCssVars, unref, computed, inject, openBlock, createElementBlock, withModifiers, createElementVNode, normalizeClass, pushScopeId, popScopeId, ref, watch, onMounted, onBeforeUnmount, toDisplayString, Fragment, renderList, useSlots, renderSlot, createCommentVNode, toRefs, provide, normalizeStyle, createBlock, normalizeProps, mergeProps, createTextVNode, guardReactiveProps, createVNode, isRef, createSlots, withCtx } from "vue";
 var MutipleSelectCheckBox_vue_vue_type_style_index_0_scoped_true_lang = "";
@@ -30,3 +30,3 @@ var _export_sfc = (sfc, props) => {
 };
-const _withScopeId$5 = (n) => (pushScopeId("data-v-566775ba"), n = n(), popScopeId(), n);
+const _withScopeId$5 = (n) => (pushScopeId("data-v-1eac0f74"), n = n(), popScopeId(), n);
 const _hoisted_1$7 = ["onClick"];
@@ -43,3 +43,3 @@ const _hoisted_2$6 = ["checked"];
     useCssVars((_ctx) => ({
-      "7f84b28f": unref(themeColor)
+      "d6c6074e": unref(themeColor)
     }));
@@ -53,3 +53,3 @@ const isChecked = computed(() => props.status === "allSelected");
       return openBlock(), createElementBlock("div", {
-        class: "multi-select__checkbox",
+        class: "easy-checkbox",
         onClick: withModifiers(toggleChecked, ["stop", "prevent"])
@@ -67,5 +67,5 @@ }, [
 });
-var MutipleSelectCheckBox = /* @__PURE__ */ _export_sfc(_sfc_main$7, [["__scopeId", "data-v-566775ba"]]);
+var MutipleSelectCheckBox = /* @__PURE__ */ _export_sfc(_sfc_main$7, [["__scopeId", "data-v-1eac0f74"]]);
 var SingleSelectCheckBox_vue_vue_type_style_index_0_scoped_true_lang = "";
-const _withScopeId$4 = (n) => (pushScopeId("data-v-39f156fd"), n = n(), popScopeId(), n);
+const _withScopeId$4 = (n) => (pushScopeId("data-v-7e69a276"), n = n(), popScopeId(), n);
 const _hoisted_1$6 = ["checked"];
@@ -80,3 +80,3 @@ const _hoisted_2$5 = /* @__PURE__ */ _withScopeId$4(() => /* @__PURE__ */ createElementVNode("label", { for: "checbox" }, null, -1));
     useCssVars((_ctx) => ({
-      "20cfc5a0": unref(themeColor)
+      "fdaf7e9e": unref(themeColor)
     }));
@@ -86,3 +86,3 @@ const themeColor = inject("themeColor");
       return openBlock(), createElementBlock("div", {
-        class: "single-select__checkbox",
+        class: "easy-checkbox",
         onClick: _cache[0] || (_cache[0] = withModifiers(($event) => emits("change"), ["stop", "prevent"]))
@@ -99,3 +99,3 @@ }, [
 });
-var SingleSelectCheckBox = /* @__PURE__ */ _export_sfc(_sfc_main$6, [["__scopeId", "data-v-39f156fd"]]);
+var SingleSelectCheckBox = /* @__PURE__ */ _export_sfc(_sfc_main$6, [["__scopeId", "data-v-7e69a276"]]);
 var RowsSelector_vue_vue_type_style_index_0_scoped_true_lang = "";
@@ -240,3 +240,3 @@ const _withScopeId$3 = (n) => (pushScopeId("data-v-384d1036"), n = n(), popScopeId(), n);
     useCssVars((_ctx) => ({
-      "3e6f6a47": unref(themeColor)
+      "40dd4f07": unref(themeColor)
     }));
@@ -278,3 +278,3 @@ const totalVisible = 7;
               active: page === props.currentPaginationNumber,
-              activePrev: i + 1 === props.currentPaginationNumber
+              activePrev: page + 1 === props.currentPaginationNumber
             });
@@ -324,3 +324,3 @@ }
               active: page === props.currentPaginationNumber,
-              activePrev: i + 1 === props.currentPaginationNumber
+              activePrev: page + 1 === props.currentPaginationNumber
             });
@@ -356,3 +356,3 @@ }
               active: page === props.currentPaginationNumber,
-              activePrev: i + 1 === props.currentPaginationNumber
+              activePrev: page + 1 === props.currentPaginationNumber
             });
@@ -383,3 +383,3 @@ }
 });
-var ButtonsPagination = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-0a59da16"]]);
+var ButtonsPagination = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-4c681fa2"]]);
 var PaginationArrows_vue_vue_type_style_index_0_scoped_true_lang = "";
@@ -419,5 +419,466 @@ const _withScopeId$1 = (n) => (pushScopeId("data-v-c9da5286"), n = n(), popScopeId(), n);
 var PaginationArrows = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-c9da5286"]]);
-var DataTable_vue_vue_type_style_index_0_scoped_true_lang = "";
-var DataTable_vue_vue_type_style_index_1_lang = "";
-const _withScopeId = (n) => (pushScopeId("data-v-6d611f3f"), n = n(), popScopeId(), n);
+function useClickRow(isMutipleSelectable, showIndex, emits) {
+  const clickRow = (item) => {
+    const clickRowArgument = __spreadValues({}, item);
+    if (isMutipleSelectable.value) {
+      const { checkbox } = item;
+      delete clickRowArgument.checkbox;
+      clickRowArgument.isSelected = checkbox;
+    }
+    if (showIndex.value) {
+      const { index } = item;
+      delete clickRowArgument.index;
+      clickRowArgument.indexInCurrentPage = index;
+    }
+    emits("clickRow", clickRowArgument);
+  };
+  return {
+    clickRow
+  };
+}
+function useExpandableRow(items, emits) {
+  const expandingItemIndexList = ref([]);
+  const updateExpandingItemIndexList = (expandingItemIndex, expandingItem, event) => {
+    event.stopPropagation();
+    const index = expandingItemIndexList.value.indexOf(expandingItemIndex);
+    if (index !== -1) {
+      expandingItemIndexList.value.splice(index, 1);
+    } else {
+      emits("expandRow", items.value.findIndex((item) => item === expandingItem));
+      expandingItemIndexList.value.push(expandingItemIndex);
+    }
+  };
+  return {
+    expandingItemIndexList,
+    updateExpandingItemIndexList
+  };
+}
+function useFixedColumn(headersForRender) {
+  const fixedHeaders = computed(() => headersForRender.value.filter((header) => header.fixed));
+  const lastFixedColumn = computed(() => {
+    if (!fixedHeaders.value.length)
+      return "";
+    return fixedHeaders.value[fixedHeaders.value.length - 1].value;
+  });
+  const fixedColumnsInfos = computed(() => {
+    if (!fixedHeaders.value.length)
+      return [];
+    const fixedHeadersWidthArr = fixedHeaders.value.map((header) => {
+      var _a;
+      return (_a = header.width) != null ? _a : 100;
+    });
+    return fixedHeaders.value.map((header, index) => {
+      var _a, _b;
+      return {
+        value: header.value,
+        fixed: (_a = header.fixed) != null ? _a : true,
+        width: (_b = header.width) != null ? _b : 100,
+        distance: index === 0 ? 0 : fixedHeadersWidthArr.reduce((previous, current, i) => {
+          let distance = previous;
+          if (i < index)
+            distance += current;
+          return distance;
+        })
+      };
+    });
+  });
+  return {
+    fixedHeaders,
+    lastFixedColumn,
+    fixedColumnsInfos
+  };
+}
+function useHeaders(checkboxColumnWidth, expandColumnWidth, fixedCheckbox, fixedExpand, fixedIndex, headers, ifHasExpandSlot, indexColumnWidth, isMutipleSelectable, isServerSideMode, mustSort, serverOptionsComputed, showIndex, sortBy, sortType, updateServerOptionsSort) {
+  const hasFixedColumnsFromUser = computed(() => headers.value.findIndex((header) => header.fixed) !== -1);
+  const fixedHeadersFromUser = computed(() => {
+    if (hasFixedColumnsFromUser.value)
+      return headers.value.filter((header) => header.fixed);
+    return [];
+  });
+  const unFixedHeaders = computed(() => headers.value.filter((header) => !header.fixed));
+  const clientSortOptions = ref((() => {
+    if (sortBy.value !== "") {
+      return {
+        sortBy: sortBy.value,
+        sortDesc: sortType.value === "desc"
+      };
+    }
+    return null;
+  })());
+  const headersForRender = computed(() => {
+    var _a;
+    const fixedHeaders = [
+      ...fixedHeadersFromUser.value,
+      ...unFixedHeaders.value
+    ];
+    const headersSorting = fixedHeaders.map((header) => {
+      const headerSorting = header;
+      if (header.sortable)
+        headerSorting.sortType = "none";
+      if (serverOptionsComputed.value && header.value === serverOptionsComputed.value.sortBy && serverOptionsComputed.value.sortType) {
+        headerSorting.sortType = serverOptionsComputed.value.sortType;
+      }
+      if (!isServerSideMode.value && clientSortOptions.value && header.value === clientSortOptions.value.sortBy) {
+        headerSorting.sortType = clientSortOptions.value.sortDesc ? "desc" : "asc";
+      }
+      return headerSorting;
+    });
+    let headersWithExpand = [];
+    if (!ifHasExpandSlot.value) {
+      headersWithExpand = headersSorting;
+    } else {
+      const headerExpand = fixedExpand.value || hasFixedColumnsFromUser.value ? {
+        text: "",
+        value: "expand",
+        fixed: true,
+        width: expandColumnWidth.value
+      } : { text: "", value: "expand" };
+      headersWithExpand = [headerExpand, ...headersSorting];
+    }
+    let headersWithIndex = [];
+    if (!showIndex.value) {
+      headersWithIndex = headersWithExpand;
+    } else {
+      const headerIndex = fixedIndex.value || hasFixedColumnsFromUser.value ? {
+        text: "#",
+        value: "index",
+        fixed: true,
+        width: indexColumnWidth.value
+      } : { text: "#", value: "index" };
+      headersWithIndex = [headerIndex, ...headersWithExpand];
+    }
+    let headersWithCheckbox = [];
+    if (!isMutipleSelectable.value) {
+      headersWithCheckbox = headersWithIndex;
+    } else {
+      const headerCheckbox = fixedCheckbox.value || hasFixedColumnsFromUser.value ? {
+        text: "checkbox",
+        value: "checkbox",
+        fixed: true,
+        width: (_a = checkboxColumnWidth.value) != null ? _a : 36
+      } : { text: "checkbox", value: "checkbox" };
+      headersWithCheckbox = [headerCheckbox, ...headersWithIndex];
+    }
+    return headersWithCheckbox;
+  });
+  const headerColumns = computed(() => headersForRender.value.map((header) => header.value));
+  const updateSortField = (newSortBy, oldSortType) => {
+    let newSortType = null;
+    if (oldSortType === "none") {
+      newSortType = "asc";
+    } else if (oldSortType === "asc") {
+      newSortType = "desc";
+    } else {
+      newSortType = mustSort.value ? "asc" : null;
+    }
+    if (isServerSideMode.value) {
+      updateServerOptionsSort(newSortBy, newSortType);
+    } else if (newSortType === null) {
+      clientSortOptions.value = null;
+    } else {
+      clientSortOptions.value = {
+        sortBy: newSortBy,
+        sortDesc: newSortType === "desc"
+      };
+    }
+  };
+  return {
+    clientSortOptions,
+    headerColumns,
+    headersForRender,
+    updateSortField
+  };
+}
+function usePageItems(currentPaginationNumber, isMutipleSelectable, isServerSideMode, items, rowsPerPageReactive, selectItemsComputed, showIndex, totalItems, totalItemsLength) {
+  const firstIndexOfItemsInCurrentPage = computed(() => (currentPaginationNumber.value - 1) * rowsPerPageReactive.value + 1);
+  const lastIndexOfItemsInCurrentPage = computed(() => {
+    if (isServerSideMode.value) {
+      return Math.min(totalItemsLength.value, currentPaginationNumber.value * rowsPerPageReactive.value);
+    }
+    return Math.min(totalItems.value.length, currentPaginationNumber.value * rowsPerPageReactive.value);
+  });
+  const itemsInPage = computed(() => {
+    if (isServerSideMode.value)
+      return items.value;
+    return totalItems.value.slice(firstIndexOfItemsInCurrentPage.value - 1, lastIndexOfItemsInCurrentPage.value);
+  });
+  const itemsWithIndex = computed(() => {
+    if (showIndex.value) {
+      return itemsInPage.value.map((item, index) => __spreadValues({ index: firstIndexOfItemsInCurrentPage.value + index }, item));
+    }
+    return itemsInPage.value;
+  });
+  const multipleSelectStatus = computed(() => {
+    if (selectItemsComputed.value.length === 0) {
+      return "noneSelected";
+    }
+    const isNoneSelected = selectItemsComputed.value.every((itemSelected) => {
+      if (totalItems.value.findIndex((item) => JSON.stringify(itemSelected) === JSON.stringify(item)) !== -1) {
+        return false;
+      }
+      return true;
+    });
+    if (isNoneSelected)
+      return "noneSelected";
+    if (selectItemsComputed.value.length === totalItems.value.length) {
+      const isAllSelected = selectItemsComputed.value.every((itemSelected) => {
+        if (totalItems.value.findIndex((item) => JSON.stringify(itemSelected) === JSON.stringify(item)) === -1) {
+          return false;
+        }
+        return true;
+      });
+      return isAllSelected ? "allSelected" : "partSelected";
+    }
+    return "partSelected";
+  });
+  const pageItems = computed(() => {
+    if (!isMutipleSelectable.value)
+      return itemsWithIndex.value;
+    if (multipleSelectStatus.value === "allSelected") {
+      return itemsWithIndex.value.map((item) => __spreadValues({ checkbox: true }, item));
+    }
+    if (multipleSelectStatus.value === "noneSelected") {
+      return itemsWithIndex.value.map((item) => __spreadValues({ checkbox: false }, item));
+    }
+    return itemsWithIndex.value.map((item) => {
+      const isSelected = selectItemsComputed.value.findIndex((selectItem) => {
+        const itemDeepCloned = __spreadValues({}, item);
+        delete itemDeepCloned.index;
+        return JSON.stringify(selectItem) === JSON.stringify(itemDeepCloned);
+      }) !== -1;
+      return __spreadValues({ checkbox: isSelected }, item);
+    });
+  });
+  return {
+    firstIndexOfItemsInCurrentPage,
+    lastIndexOfItemsInCurrentPage,
+    multipleSelectStatus,
+    pageItems
+  };
+}
+function usePagination(isServerSideMode, loading, totalItemsLength, rowsPerPage, serverOptions, updateServerOptionsPage) {
+  const currentPaginationNumber = ref(serverOptions.value ? serverOptions.value.page : 1);
+  const maxPaginationNumber = computed(() => Math.ceil(totalItemsLength.value / rowsPerPage.value));
+  const isLastPage = computed(() => currentPaginationNumber.value === maxPaginationNumber.value);
+  const isFirstPage = computed(() => currentPaginationNumber.value === 1);
+  const nextPage = () => {
+    if (isLastPage.value)
+      return;
+    if (loading.value)
+      return;
+    if (isServerSideMode.value) {
+      const nextPaginationNumber = currentPaginationNumber.value + 1;
+      updateServerOptionsPage(nextPaginationNumber);
+    } else {
+      currentPaginationNumber.value += 1;
+    }
+  };
+  const prevPage = () => {
+    if (isFirstPage.value)
+      return;
+    if (loading.value)
+      return;
+    if (isServerSideMode.value) {
+      const prevPaginationNumber = currentPaginationNumber.value - 1;
+      updateServerOptionsPage(prevPaginationNumber);
+    } else {
+      currentPaginationNumber.value -= 1;
+    }
+  };
+  const updatePage = (page) => {
+    if (loading.value)
+      return;
+    if (isServerSideMode.value) {
+      updateServerOptionsPage(page);
+    } else {
+      currentPaginationNumber.value = page;
+    }
+  };
+  const updateCurrentPaginationNumber = (page) => {
+    currentPaginationNumber.value = page;
+  };
+  return {
+    currentPaginationNumber,
+    maxPaginationNumber,
+    isLastPage,
+    isFirstPage,
+    nextPage,
+    prevPage,
+    updatePage,
+    updateCurrentPaginationNumber
+  };
+}
+function useRows(isServerSideMode, rowsItems, serverOptions, rowsPerPage) {
+  const rowsItemsComputed = computed(() => {
+    if (!isServerSideMode.value && rowsItems.value.findIndex((item) => item === rowsPerPage.value) === -1) {
+      return [rowsPerPage.value, ...rowsItems.value];
+    }
+    return rowsItems.value;
+  });
+  const rowsPerPageReactive = ref(serverOptions.value ? serverOptions.value.rowsPerPage : rowsPerPage.value);
+  return {
+    rowsItemsComputed,
+    rowsPerPageReactive
+  };
+}
+function useServerOptions(serverOptions, emits) {
+  const serverOptionsComputed = computed({
+    get: () => {
+      if (serverOptions.value) {
+        const {
+          page,
+          rowsPerPage,
+          sortBy,
+          sortType
+        } = serverOptions.value;
+        return {
+          page,
+          rowsPerPage,
+          sortBy: sortBy != null ? sortBy : null,
+          sortType: sortType != null ? sortType : null
+        };
+      }
+      return null;
+    },
+    set: (value) => {
+      emits("update:serverOptions", value);
+    }
+  });
+  const updateServerOptionsPage = (page) => {
+    if (serverOptionsComputed.value) {
+      serverOptionsComputed.value = __spreadProps(__spreadValues({}, serverOptionsComputed.value), {
+        page
+      });
+    }
+  };
+  const updateServerOptionsRowsPerPage = (rowsPerPage) => {
+    if (serverOptionsComputed.value) {
+      serverOptionsComputed.value = __spreadProps(__spreadValues({}, serverOptionsComputed.value), {
+        page: 1,
+        rowsPerPage
+      });
+    }
+  };
+  const updateServerOptionsSort = (newSortBy, newSortType) => {
+    if (serverOptionsComputed.value) {
+      serverOptionsComputed.value = __spreadProps(__spreadValues({}, serverOptionsComputed.value), {
+        sortBy: newSortType !== null ? newSortBy : null,
+        sortType: newSortType
+      });
+    }
+  };
+  return {
+    serverOptionsComputed,
+    updateServerOptionsPage,
+    updateServerOptionsSort,
+    updateServerOptionsRowsPerPage
+  };
+}
+function getItemValue(column, item) {
+  if (column.includes(".")) {
+    let content = "";
+    const keysArr = column.split(".");
+    keysArr.forEach((key, index) => {
+      content = index === 0 ? item[key] : content[key];
+    });
+    return content;
+  }
+  return item[column];
+}
+function generateColumnContent(column, item) {
+  const content = getItemValue(column, item);
+  return Array.isArray(content) ? content.join(",") : content;
+}
+function useTotalItems(clientSortOptions, filterOptions, isServerSideMode, items, itemsSelected, searchField, searchValue, serverItemsLength, emits) {
+  const itemsSearching = computed(() => {
+    if (!isServerSideMode.value && searchValue.value !== "") {
+      const regex = new RegExp(searchValue.value, "i");
+      return items.value.filter((item) => regex.test(searchField.value !== "" ? item[searchField.value] : Object.values(item).join(" ")));
+    }
+    return items.value;
+  });
+  const itemsFiltering = computed(() => {
+    let itemsFiltered = [...itemsSearching.value];
+    if (filterOptions.value) {
+      filterOptions.value.forEach((option) => {
+        itemsFiltered = itemsFiltered.filter((item) => {
+          const { field, comparison, criteria } = option;
+          if (typeof comparison === "function") {
+            return comparison(item[field], criteria);
+          }
+          switch (comparison) {
+            case "=":
+              return item[field] === criteria;
+            case "!=":
+              return item[field] !== criteria;
+            case ">":
+              return item[field] > criteria;
+            case "<":
+              return item[field] < criteria;
+            case "<=":
+              return item[field] <= criteria;
+            case ">=":
+              return item[field] >= criteria;
+            case "between":
+              return item[field] >= Math.min(...criteria) && item[field] <= Math.max(...criteria);
+            default:
+              return item[field] === criteria;
+          }
+        });
+      });
+      return itemsFiltered;
+    }
+    return itemsSearching.value;
+  });
+  const totalItems = computed(() => {
+    if (isServerSideMode.value)
+      return items.value;
+    if (clientSortOptions.value === null)
+      return itemsFiltering.value;
+    const { sortBy, sortDesc } = clientSortOptions.value;
+    const itemsFilteringSorted = [...itemsFiltering.value];
+    return itemsFilteringSorted.sort((a, b) => {
+      if (getItemValue(sortBy, a) < getItemValue(sortBy, b))
+        return sortDesc ? 1 : -1;
+      if (getItemValue(sortBy, a) > getItemValue(sortBy, b))
+        return sortDesc ? -1 : 1;
+      return 0;
+    });
+  });
+  const totalItemsLength = computed(() => isServerSideMode.value ? serverItemsLength.value : totalItems.value.length);
+  const selectItemsComputed = computed({
+    get: () => {
+      var _a;
+      return (_a = itemsSelected.value) != null ? _a : [];
+    },
+    set: (value) => {
+      emits("update:itemsSelected", value);
+    }
+  });
+  const toggleSelectAll = (isChecked) => {
+    selectItemsComputed.value = isChecked ? totalItems.value : [];
+  };
+  const toggleSelectItem = (item) => {
+    const isAlreadyChecked = item.checkbox;
+    delete item.checkbox;
+    delete item.index;
+    if (!isAlreadyChecked) {
+      const selectItemsArr = selectItemsComputed.value;
+      selectItemsArr.unshift(item);
+      selectItemsComputed.value = selectItemsArr;
+    } else {
+      selectItemsComputed.value = selectItemsComputed.value.filter((selectedItem) => JSON.stringify(selectedItem) !== JSON.stringify(item));
+    }
+  };
+  return {
+    totalItems,
+    selectItemsComputed,
+    totalItemsLength,
+    toggleSelectAll,
+    toggleSelectItem
+  };
+}
+var DataTable_vue_vue_type_style_index_0_lang = "";
+var DataTable_vue_vue_type_style_index_1_scoped_true_lang = "";
+const _withScopeId = (n) => (pushScopeId("data-v-13c5baed"), n = n(), popScopeId(), n);
 const _hoisted_1 = ["onClick"];
@@ -610,18 +1071,41 @@ const _hoisted_2 = {
   emits: [
+    "clickRow",
+    "expandRow",
     "update:itemsSelected",
-    "update:serverOptions",
-    "clickRow",
-    "expandRow"
+    "update:serverOptions"
   ],
   setup(__props, { expose, emit: emits }) {
     const props = __props;
-    useCssVars((_ctx) => ({
-      "832f48d4": unref(tableHeightPx)
-    }));
-    const tableHeightPx = computed(() => props.tableHeight ? `${props.tableHeight}px` : null);
-    provide("themeColor", props.themeColor);
+    const {
+      checkboxColumnWidth,
+      expandColumnWidth,
+      filterOptions,
+      fixedCheckbox,
+      fixedExpand,
+      fixedHeader,
+      fixedIndex,
+      headers,
+      indexColumnWidth,
+      items,
+      itemsSelected,
+      loading,
+      mustSort,
+      rowsItems,
+      rowsPerPage,
+      searchField,
+      searchValue,
+      serverItemsLength,
+      serverOptions,
+      showIndex,
+      sortBy,
+      sortType,
+      tableHeight,
+      themeColor
+    } = toRefs(props);
+    computed(() => tableHeight.value ? `${tableHeight.value}px` : null);
+    provide("themeColor", themeColor.value);
     const slots = useSlots();
-    const ifHasPaginationSlot = computed(() => slots.pagination);
-    const ifHasLoadingSlot = computed(() => slots.loading);
-    const ifHasExpandSlot = computed(() => slots.expand);
+    const ifHasPaginationSlot = computed(() => !!slots.pagination);
+    const ifHasLoadingSlot = computed(() => !!slots.loading);
+    const ifHasExpandSlot = computed(() => !!slots.expand);
     const dataTable = ref();
@@ -636,122 +1120,55 @@ const tableBody = ref();
     });
-    const serverOptionsComputed = computed({
-      get: () => {
-        if (props.serverOptions) {
-          const {
-            page,
-            rowsPerPage,
-            sortBy,
-            sortType
-          } = props.serverOptions;
-          return {
-            page,
-            rowsPerPage,
-            sortBy: sortBy != null ? sortBy : null,
-            sortType: sortType != null ? sortType : null
-          };
-        }
-        return null;
-      },
-      set: (value) => {
-        emits("update:serverOptions", value);
-      }
-    });
-    const isMutipleSelectable = computed(() => props.itemsSelected !== null);
-    const isServerSideMode = computed(() => serverOptionsComputed.value !== null);
-    const rowsItemsComputed = computed(() => {
-      if (!isServerSideMode.value && props.rowsItems.findIndex((item) => item === props.rowsPerPage) === -1) {
-        return [props.rowsPerPage, ...props.rowsItems];
-      }
-      return props.rowsItems;
-    });
-    const initClientSortOptions = () => {
-      if (props.sortBy !== "") {
-        return {
-          sortBy: props.sortBy,
-          sortDesc: props.sortType === "desc"
-        };
-      }
-      return null;
-    };
-    const clientSortOptions = ref(initClientSortOptions());
-    const hasFixedColumnsFromUser = computed(() => props.headers.findIndex((header) => header.fixed) !== -1);
-    const fixedHeadersFromUser = computed(() => {
-      if (hasFixedColumnsFromUser.value)
-        return props.headers.filter((header) => header.fixed);
-      return [];
-    });
-    const unFixedHeaders = computed(() => props.headers.filter((header) => !header.fixed));
-    const headersForRender = computed(() => {
-      var _a;
-      const fixedHeaders2 = [
-        ...fixedHeadersFromUser.value,
-        ...unFixedHeaders.value
-      ];
-      const headersSorting = fixedHeaders2.map((header) => {
-        const headerSorting = header;
-        if (header.sortable)
-          headerSorting.sortType = "none";
-        if (serverOptionsComputed.value && header.value === serverOptionsComputed.value.sortBy && serverOptionsComputed.value.sortType) {
-          headerSorting.sortType = serverOptionsComputed.value.sortType;
-        }
-        if (!isServerSideMode.value && clientSortOptions.value && header.value === clientSortOptions.value.sortBy) {
-          headerSorting.sortType = clientSortOptions.value.sortDesc ? "desc" : "asc";
-        }
-        return headerSorting;
-      });
-      let headersWithExpand = [];
-      if (!ifHasExpandSlot.value) {
-        headersWithExpand = headersSorting;
-      } else {
-        const headerExpand = props.fixedExpand || hasFixedColumnsFromUser.value ? {
-          text: "",
-          value: "expand",
-          fixed: true,
-          width: props.expandColumnWidth
-        } : { text: "", value: "expand" };
-        headersWithExpand = [headerExpand, ...headersSorting];
-      }
-      let headersWithIndex = [];
-      if (!props.showIndex) {
-        headersWithIndex = headersWithExpand;
-      } else {
-        const headerIndex = props.fixedIndex || hasFixedColumnsFromUser.value ? {
-          text: "#",
-          value: "index",
-          fixed: true,
-          width: props.indexColumnWidth
-        } : { text: "#", value: "index" };
-        headersWithIndex = [headerIndex, ...headersWithExpand];
-      }
-      let headersWithCheckbox = [];
-      if (!isMutipleSelectable.value) {
-        headersWithCheckbox = headersWithIndex;
-      } else {
-        const headerCheckbox = props.fixedCheckbox || hasFixedColumnsFromUser.value ? {
-          text: "checkbox",
-          value: "checkbox",
-          fixed: true,
-          width: (_a = props.checkboxColumnWidth) != null ? _a : 36
-        } : { text: "checkbox", value: "checkbox" };
-        headersWithCheckbox = [headerCheckbox, ...headersWithIndex];
-      }
-      return headersWithCheckbox;
-    });
-    const expandingItemIndexList = ref([]);
-    const updateExpandingItemIndexList = (expandingItemIndex, expandingItem, event) => {
-      event.stopPropagation();
-      const index = expandingItemIndexList.value.indexOf(expandingItemIndex);
-      if (index !== -1) {
-        expandingItemIndexList.value.splice(index, 1);
-      } else {
-        emits("expandRow", props.items.findIndex((item) => item === expandingItem));
-        expandingItemIndexList.value.push(expandingItemIndex);
-      }
-    };
-    const fixedHeaders = computed(() => headersForRender.value.filter((header) => header.fixed));
-    const lastFixedColumn = computed(() => {
-      if (!fixedHeaders.value.length)
-        return "";
-      return fixedHeaders.value[fixedHeaders.value.length - 1].value;
-    });
+    const isMutipleSelectable = computed(() => itemsSelected.value !== null);
+    const isServerSideMode = computed(() => serverOptions.value !== null);
+    const {
+      serverOptionsComputed,
+      updateServerOptionsPage,
+      updateServerOptionsSort,
+      updateServerOptionsRowsPerPage
+    } = useServerOptions(serverOptions, emits);
+    const {
+      clientSortOptions,
+      headerColumns,
+      headersForRender,
+      updateSortField
+    } = useHeaders(checkboxColumnWidth, expandColumnWidth, fixedCheckbox, fixedExpand, fixedIndex, headers, ifHasExpandSlot, indexColumnWidth, isMutipleSelectable, isServerSideMode, mustSort, serverOptionsComputed, showIndex, sortBy, sortType, updateServerOptionsSort);
+    const {
+      rowsItemsComputed,
+      rowsPerPageReactive
+    } = useRows(isServerSideMode, rowsItems, serverOptions, rowsPerPage);
+    const {
+      totalItems,
+      selectItemsComputed,
+      totalItemsLength,
+      toggleSelectAll,
+      toggleSelectItem
+    } = useTotalItems(clientSortOptions, filterOptions, isServerSideMode, items, itemsSelected, searchField, searchValue, serverItemsLength, emits);
+    const {
+      currentPaginationNumber,
+      maxPaginationNumber,
+      isLastPage,
+      isFirstPage,
+      nextPage,
+      prevPage,
+      updatePage,
+      updateCurrentPaginationNumber
+    } = usePagination(isServerSideMode, loading, totalItemsLength, rowsPerPageReactive, serverOptions, updateServerOptionsPage);
+    const {
+      firstIndexOfItemsInCurrentPage,
+      lastIndexOfItemsInCurrentPage,
+      multipleSelectStatus,
+      pageItems
+    } = usePageItems(currentPaginationNumber, isMutipleSelectable, isServerSideMode, items, rowsPerPageReactive, selectItemsComputed, showIndex, totalItems, totalItemsLength);
+    const {
+      expandingItemIndexList,
+      updateExpandingItemIndexList
+    } = useExpandableRow(items, emits);
+    const {
+      fixedHeaders,
+      lastFixedColumn,
+      fixedColumnsInfos
+    } = useFixedColumn(headersForRender);
+    const {
+      clickRow
+    } = useClickRow(isMutipleSelectable, showIndex, emits);
     const getColStyle = (header) => {
@@ -764,24 +1181,2 @@ var _a;
     };
-    const fixedColumnsInfos = computed(() => {
-      if (!fixedHeaders.value.length)
-        return [];
-      const fixedHeadersWidthArr = fixedHeaders.value.map((header) => {
-        var _a;
-        return (_a = header.width) != null ? _a : 100;
-      });
-      return fixedHeaders.value.map((header, index) => {
-        var _a, _b;
-        return {
-          value: header.value,
-          fixed: (_a = header.fixed) != null ? _a : true,
-          width: (_b = header.width) != null ? _b : 100,
-          distance: index === 0 ? 0 : fixedHeadersWidthArr.reduce((previous, current, i) => {
-            let distance = previous;
-            if (i < index)
-              distance += current;
-            return distance;
-          })
-        };
-      });
-    });
     const getFixedDistance = (column, type = "th") => {
@@ -796,266 +1191,24 @@ if (!fixedHeaders.value.length)
     };
-    const headerColumns = computed(() => headersForRender.value.map((header) => header.value));
-    const getItemValue = (column, item) => {
-      if (column.includes(".")) {
-        let content = "";
-        const keysArr = column.split(".");
-        keysArr.forEach((key, index) => {
-          content = index === 0 ? item[key] : content[key];
-        });
-        return content;
-      }
-      return item[column];
-    };
-    const generateColumnContent = (column, item) => {
-      const content = getItemValue(column, item);
-      return Array.isArray(content) ? content.join(",") : content;
-    };
-    const selectItemsComputed = computed({
-      get: () => {
-        var _a;
-        return (_a = props.itemsSelected) != null ? _a : [];
-      },
-      set: (value) => {
-        emits("update:itemsSelected", value);
-      }
-    });
-    const itemsSearching = computed(() => {
-      if (!isServerSideMode.value && props.searchValue !== "") {
-        const regex = new RegExp(props.searchValue, "i");
-        return props.items.filter((item) => regex.test(props.searchField !== "" ? item[props.searchField] : Object.values(item).join(" ")));
-      }
-      return props.items;
-    });
-    const itemsFiltering = computed(() => {
-      let itemsFiltered = [...itemsSearching.value];
-      if (props.filterOptions) {
-        props.filterOptions.forEach((option) => {
-          itemsFiltered = itemsFiltered.filter((item) => {
-            const { field, comparison, criteria } = option;
-            if (typeof comparison === "function") {
-              return comparison(item[field], criteria);
-            }
-            switch (comparison) {
-              case "=":
-                return item[field] === criteria;
-              case "!=":
-                return item[field] !== criteria;
-              case ">":
-                return item[field] > criteria;
-              case "<":
-                return item[field] < criteria;
-              case "<=":
-                return item[field] <= criteria;
-              case ">=":
-                return item[field] >= criteria;
-              case "between":
-                return item[field] >= Math.min(...criteria) && item[field] <= Math.max(...criteria);
-              default:
-                return item[field] === criteria;
-            }
-          });
-        });
-        return itemsFiltered;
-      }
-      return itemsSearching.value;
-    });
-    const multipleSelectStatus = computed(() => {
-      if (selectItemsComputed.value.length === 0) {
-        return "noneSelected";
-      }
-      const isNoneSelected = selectItemsComputed.value.every((itemSelected) => {
-        if (itemsFiltering.value.findIndex((item) => JSON.stringify(itemSelected) === JSON.stringify(item)) !== -1) {
-          return false;
+    watch(loading, (newVal, oldVal) => {
+      if (serverOptionsComputed.value) {
+        if (newVal === false && oldVal === true) {
+          updateCurrentPaginationNumber(serverOptionsComputed.value.page);
         }
-        return true;
-      });
-      if (isNoneSelected)
-        return "noneSelected";
-      if (selectItemsComputed.value.length === itemsFiltering.value.length) {
-        const isAllSelected = selectItemsComputed.value.every((itemSelected) => {
-          if (itemsFiltering.value.findIndex((item) => JSON.stringify(itemSelected) === JSON.stringify(item)) === -1) {
-            return false;
-          }
-          return true;
-        });
-        return isAllSelected ? "allSelected" : "partSelected";
       }
-      return "partSelected";
     });
-    const currentPaginationNumber = ref(isServerSideMode.value ? props.serverOptions.page : 1);
-    const { items } = toRefs(props);
     watch(items, () => {
       if (!isServerSideMode.value)
-        currentPaginationNumber.value = 1;
+        updatePage(1);
     }, { deep: true });
-    const rowsPerPageReactive = ref(isServerSideMode.value ? props.serverOptions.rowsPerPage : props.rowsPerPage);
     watch(rowsPerPageReactive, (value) => {
-      if (serverOptionsComputed.value) {
-        serverOptionsComputed.value = __spreadProps(__spreadValues({}, serverOptionsComputed.value), {
-          page: 1,
-          rowsPerPage: value
-        });
-      }
-      currentPaginationNumber.value = 1;
-    });
-    const updateSortField = (newSortBy, oldSortType) => {
-      let newSortType = null;
-      if (oldSortType === "none") {
-        newSortType = "asc";
-      } else if (oldSortType === "asc") {
-        newSortType = "desc";
+      if (!isServerSideMode.value) {
+        updatePage(1);
       } else {
-        newSortType = props.mustSort ? "asc" : null;
+        updateServerOptionsRowsPerPage(value);
       }
-      if (serverOptionsComputed.value) {
-        serverOptionsComputed.value = __spreadProps(__spreadValues({}, serverOptionsComputed.value), {
-          sortBy: newSortType !== null ? newSortBy : null,
-          sortType: newSortType
-        });
-      } else if (newSortType === null) {
-        clientSortOptions.value = null;
-      } else {
-        clientSortOptions.value = {
-          sortBy: newSortBy,
-          sortDesc: newSortType === "desc"
-        };
-      }
-    };
-    const itemsSorting = computed(() => {
-      if (isServerSideMode.value)
-        return props.items;
-      if (clientSortOptions.value === null)
-        return itemsFiltering.value;
-      const { sortBy, sortDesc } = clientSortOptions.value;
-      const itemsFilteringSorted = [...itemsFiltering.value];
-      return itemsFilteringSorted.sort((a, b) => {
-        if (getItemValue(sortBy, a) < getItemValue(sortBy, b))
-          return sortDesc ? 1 : -1;
-        if (getItemValue(sortBy, a) > getItemValue(sortBy, b))
-          return sortDesc ? -1 : 1;
-        return 0;
-      });
     });
-    const totalItemsLength = computed(() => isServerSideMode.value ? props.serverItemsLength : itemsFiltering.value.length);
-    const lastIndexOfItemsInCurrentPage = computed(() => {
-      if (isServerSideMode.value) {
-        return Math.min(totalItemsLength.value, currentPaginationNumber.value * rowsPerPageReactive.value);
-      }
-      return Math.min(itemsFiltering.value.length, currentPaginationNumber.value * rowsPerPageReactive.value);
-    });
-    const firstIndexOfItemsInCurrentPage = computed(() => (currentPaginationNumber.value - 1) * rowsPerPageReactive.value + 1);
-    const maxPaginationNumber = computed(() => Math.ceil(totalItemsLength.value / rowsPerPageReactive.value));
-    const isLastPage = computed(() => currentPaginationNumber.value === maxPaginationNumber.value);
-    const isFirstPage = computed(() => currentPaginationNumber.value === 1);
-    const { loading } = toRefs(props);
-    const nextPage = () => {
-      if (isLastPage.value)
-        return;
-      if (loading.value)
-        return;
-      if (serverOptionsComputed.value) {
-        const nextPaginationNumber = currentPaginationNumber.value + 1;
-        serverOptionsComputed.value = __spreadProps(__spreadValues({}, serverOptionsComputed.value), {
-          page: nextPaginationNumber
-        });
-      } else {
-        currentPaginationNumber.value += 1;
-      }
-    };
-    const prevPage = () => {
-      if (isFirstPage.value)
-        return;
-      if (loading.value)
-        return;
-      if (serverOptionsComputed.value) {
-        const prevPaginationNumber = currentPaginationNumber.value - 1;
-        serverOptionsComputed.value = __spreadProps(__spreadValues({}, serverOptionsComputed.value), {
-          page: prevPaginationNumber
-        });
-      } else {
-        currentPaginationNumber.value -= 1;
-      }
-    };
-    const updatePage = (value) => {
-      if (loading.value)
-        return;
-      if (serverOptionsComputed.value) {
-        serverOptionsComputed.value = __spreadProps(__spreadValues({}, serverOptionsComputed.value), {
-          page: value
-        });
-      } else {
-        currentPaginationNumber.value = value;
-      }
-    };
-    watch(loading, (newVal, oldVal) => {
-      if (serverOptionsComputed.value) {
-        if (newVal === false && oldVal === true) {
-          currentPaginationNumber.value = serverOptionsComputed.value.page;
-        }
-      }
-    });
-    const itemsInPage = computed(() => {
-      if (isServerSideMode.value)
-        return props.items;
-      return itemsSorting.value.slice(firstIndexOfItemsInCurrentPage.value - 1, lastIndexOfItemsInCurrentPage.value);
-    });
-    const currentPageFirstIndex = computed(() => rowsPerPageReactive.value * (currentPaginationNumber.value - 1) + 1);
-    const currentPageLastIndex = computed(() => rowsPerPageReactive.value * currentPaginationNumber.value);
-    const itemsWithIndex = computed(() => {
-      if (props.showIndex) {
-        return itemsInPage.value.map((item, index) => __spreadValues({ index: currentPageFirstIndex.value + index }, item));
-      }
-      return itemsInPage.value;
-    });
-    const itemsForRender = computed(() => {
-      if (!isMutipleSelectable.value)
-        return itemsWithIndex.value;
-      if (multipleSelectStatus.value === "allSelected") {
-        return itemsWithIndex.value.map((item) => __spreadValues({ checkbox: true }, item));
-      }
-      if (multipleSelectStatus.value === "noneSelected") {
-        return itemsWithIndex.value.map((item) => __spreadValues({ checkbox: false }, item));
-      }
-      return itemsWithIndex.value.map((item) => {
-        const isSelected = selectItemsComputed.value.findIndex((selectItem) => {
-          const itemDeepCloned = __spreadValues({}, item);
-          delete itemDeepCloned.index;
-          return JSON.stringify(selectItem) === JSON.stringify(itemDeepCloned);
-        }) !== -1;
-        return __spreadValues({ checkbox: isSelected }, item);
-      });
-    });
-    const toggleSelectAll = (isChecked) => {
-      selectItemsComputed.value = isChecked ? itemsSorting.value : [];
-    };
-    const toggleSelectItem = (item) => {
-      const isAlreadyChecked = item.checkbox;
-      delete item.checkbox;
-      delete item.index;
-      if (!isAlreadyChecked) {
-        const selectItemsArr = selectItemsComputed.value;
-        selectItemsArr.unshift(item);
-        selectItemsComputed.value = selectItemsArr;
-      } else {
-        selectItemsComputed.value = selectItemsComputed.value.filter((selectedItem) => JSON.stringify(selectedItem) !== JSON.stringify(item));
-      }
-    };
-    const clickRow = (item) => {
-      const clickRowArgument = __spreadValues({}, item);
-      if (isMutipleSelectable.value) {
-        const { checkbox } = item;
-        delete clickRowArgument.checkbox;
-        clickRowArgument.isSelected = checkbox;
-      }
-      if (props.showIndex) {
-        const { index } = item;
-        delete clickRowArgument.index;
-        clickRowArgument.indexInCurrentPage = index;
-      }
-      emits("clickRow", clickRowArgument);
-    };
     expose({
+      firstIndexOfItemsInCurrentPage,
+      lastIndexOfItemsInCurrentPage,
       clientItemsLength: totalItemsLength,
-      currentPageFirstIndex,
-      currentPageLastIndex,
       maxPaginationNumber,
@@ -1079,4 +1232,4 @@ currentPaginationNumber,
           class: normalizeClass(["vue3-easy-data-table__main", {
-            "fixed-header": __props.fixedHeader,
-            "fixed-height": __props.tableHeight,
+            "fixed-header": unref(fixedHeader),
+            "fixed-height": unref(tableHeight),
             "show-shadow": showShadow.value,
@@ -1113,3 +1266,3 @@ "table-fixed": unref(fixedHeaders).length,
                     style: normalizeStyle(getFixedDistance(header.value)),
-                    onClick: withModifiers(($event) => header.sortable && header.sortType ? updateSortField(header.value, header.sortType) : null, ["stop"])
+                    onClick: withModifiers(($event) => header.sortable && header.sortType ? unref(updateSortField)(header.value, header.sortType) : null, ["stop"])
                   }, [
@@ -1119,4 +1272,4 @@ header.text === "checkbox" ? (openBlock(), createBlock(MutipleSelectCheckBox, {
                       status: unref(multipleSelectStatus),
-                      onChange: toggleSelectAll
-                    }, null, 8, ["status"])) : (openBlock(), createElementBlock("span", _hoisted_2, [
+                      onChange: unref(toggleSelectAll)
+                    }, null, 8, ["status", "onChange"])) : (openBlock(), createElementBlock("span", _hoisted_2, [
                       unref(slots)[`header-${header.value}`] ? renderSlot(_ctx.$slots, `header-${header.value}`, normalizeProps(mergeProps({ key: 0 }, header)), void 0, true) : (openBlock(), createElementBlock("span", _hoisted_3, toDisplayString(header.text), 1)),
@@ -1136,3 +1289,3 @@ header.sortable ? (openBlock(), createElementBlock("i", {
             }, [
-              (openBlock(true), createElementBlock(Fragment, null, renderList(unref(itemsForRender), (item, index) => {
+              (openBlock(true), createElementBlock(Fragment, null, renderList(unref(pageItems), (item, index) => {
                 return openBlock(), createElementBlock(Fragment, { key: index }, [
@@ -1144,3 +1297,3 @@ createElementVNode("tr", {
                     ]),
-                    onClick: ($event) => clickRow(item)
+                    onClick: ($event) => unref(clickRow)(item)
                   }, [
@@ -1155,13 +1308,13 @@ (openBlock(true), createElementBlock(Fragment, null, renderList(unref(headerColumns), (column, i) => {
                         }, typeof __props.bodyItemClassName === "string" ? __props.bodyItemClassName : __props.bodyItemClassName(column, i)]),
-                        onClick: ($event) => column === "expand" ? updateExpandingItemIndexList(index, item, $event) : null
+                        onClick: ($event) => column === "expand" ? unref(updateExpandingItemIndexList)(index, item, $event) : null
                       }, [
                         unref(slots)[`item-${column}`] ? renderSlot(_ctx.$slots, `item-${column}`, normalizeProps(mergeProps({ key: 0 }, item)), void 0, true) : column === "expand" ? (openBlock(), createElementBlock("i", {
                           key: 1,
-                          class: normalizeClass(["expand-icon", { "expanding": expandingItemIndexList.value.includes(index) }])
+                          class: normalizeClass(["expand-icon", { "expanding": unref(expandingItemIndexList).includes(index) }])
                         }, null, 2)) : column === "checkbox" ? (openBlock(), createBlock(SingleSelectCheckBox, {
                           key: 2,
                           checked: item[column],
-                          onChange: ($event) => toggleSelectItem(item)
+                          onChange: ($event) => unref(toggleSelectItem)(item)
                         }, null, 8, ["checked", "onChange"])) : (openBlock(), createElementBlock(Fragment, { key: 3 }, [
-                          createTextVNode(toDisplayString(generateColumnContent(column, item)), 1)
+                          createTextVNode(toDisplayString(unref(generateColumnContent)(column, item)), 1)
                         ], 64))
@@ -1171,3 +1324,3 @@ ], 14, _hoisted_5);
                   ], 10, _hoisted_4),
-                  unref(ifHasExpandSlot) && expandingItemIndexList.value.includes(index) ? (openBlock(), createElementBlock("tr", {
+                  unref(ifHasExpandSlot) && unref(expandingItemIndexList).includes(index) ? (openBlock(), createElementBlock("tr", {
                     key: 0,
@@ -1197,3 +1350,3 @@ class: normalizeClass({ "even-row": (index + 1) % 2 === 0 })
           ])) : createCommentVNode("", true),
-          !unref(itemsForRender).length && !unref(loading) ? (openBlock(), createElementBlock("div", _hoisted_10, toDisplayString(__props.emptyMessage), 1)) : createCommentVNode("", true)
+          !unref(pageItems).length && !unref(loading) ? (openBlock(), createElementBlock("div", _hoisted_10, toDisplayString(__props.emptyMessage), 1)) : createCommentVNode("", true)
         ], 2),
@@ -1204,4 +1357,4 @@ !__props.hideFooter ? (openBlock(), createElementBlock("div", _hoisted_11, [
             createVNode(RowsSelector, {
-              modelValue: rowsPerPageReactive.value,
-              "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => rowsPerPageReactive.value = $event),
+              modelValue: unref(rowsPerPageReactive),
+              "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isRef(rowsPerPageReactive) ? rowsPerPageReactive.value = $event : null),
               "rows-items": unref(rowsItemsComputed)
@@ -1214,6 +1367,6 @@ }, null, 8, ["modelValue", "rows-items"])
             isLastPage: unref(isLastPage),
-            currentPaginationNumber: currentPaginationNumber.value,
+            currentPaginationNumber: unref(currentPaginationNumber),
             maxPaginationNumber: unref(maxPaginationNumber),
-            nextPage,
-            prevPage
+            nextPage: unref(nextPage),
+            prevPage: unref(prevPage)
           })), void 0, true) : (openBlock(), createBlock(PaginationArrows, {
@@ -1223,4 +1376,4 @@ key: 2,
             "is-last-page": unref(isLastPage),
-            onClickNextPage: nextPage,
-            onClickPrevPage: prevPage
+            onClickNextPage: unref(nextPage),
+            onClickPrevPage: unref(prevPage)
           }, createSlots({ _: 2 }, [
@@ -1231,9 +1384,9 @@ __props.buttonsPagination ? {
                 createVNode(ButtonsPagination, {
-                  "current-pagination-number": currentPaginationNumber.value,
+                  "current-pagination-number": unref(currentPaginationNumber),
                   "max-pagination-number": unref(maxPaginationNumber),
-                  onUpdatePage: updatePage
-                }, null, 8, ["current-pagination-number", "max-pagination-number"])
+                  onUpdatePage: unref(updatePage)
+                }, null, 8, ["current-pagination-number", "max-pagination-number", "onUpdatePage"])
               ])
             } : void 0
-          ]), 1032, ["is-first-page", "is-last-page"]))
+          ]), 1032, ["is-first-page", "is-last-page", "onClickNextPage", "onClickPrevPage"]))
         ])) : createCommentVNode("", true)
@@ -1244,3 +1397,3 @@ ], 2);
 });
-var DataTable = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-6d611f3f"]]);
+var DataTable = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-13c5baed"]]);
 if (typeof window !== "undefined" && window.Vue) {
@@ -1247,0 +1400,0 @@ window.Vue.createApp({}).component("Vue3EasyDataTable", DataTable);

dist/vue3-easy-data-table.umd.js

@@ -1,1 +0,1 @@
-(function(e,y){typeof exports=="object"&&typeof module!="undefined"?module.exports=y(require("vue")):typeof define=="function"&&define.amd?define(["vue"],y):(e=typeof globalThis!="undefined"?globalThis:e||self,e["vue3-easy-data-table"]=y(e.Vue))})(this,function(e){"use strict";var dt=Object.defineProperty,ut=Object.defineProperties;var pt=Object.getOwnPropertyDescriptors;var ce=Object.getOwnPropertySymbols;var mt=Object.prototype.hasOwnProperty,ft=Object.prototype.propertyIsEnumerable;var de=(e,y,f)=>y in e?dt(e,y,{enumerable:!0,configurable:!0,writable:!0,value:f}):e[y]=f,N=(e,y)=>{for(var f in y||(y={}))mt.call(y,f)&&de(e,f,y[f]);if(ce)for(var f of ce(y))ft.call(y,f)&&de(e,f,y[f]);return e},L=(e,y)=>ut(e,pt(y));var y="",f=(o,h)=>{const l=o.__vccOpts||o;for(const[a,g]of h)l[a]=g;return l};const ue=o=>(e.pushScopeId("data-v-566775ba"),o=o(),e.popScopeId(),o),pe=["onClick"],me=["checked"],fe=ue(()=>e.createElementVNode("label",{for:"checbox"},null,-1));var ge=f(e.defineComponent({props:{status:{type:String,required:!0}},emits:["change"],setup(o,{emit:h}){const l=o;e.useCssVars(w=>({"7f84b28f":e.unref(x)}));const a=e.computed(()=>l.status==="allSelected"),g=()=>{h("change",!a.value)},x=e.inject("themeColor");return(w,u)=>(e.openBlock(),e.createElementBlock("div",{class:"multi-select__checkbox",onClick:e.withModifiers(g,["stop","prevent"])},[e.createElementVNode("input",{type:"checkbox",checked:e.unref(a),class:e.normalizeClass(o.status)},null,10,me),fe],8,pe))}}),[["__scopeId","data-v-566775ba"]]),ht="";const he=o=>(e.pushScopeId("data-v-39f156fd"),o=o(),e.popScopeId(),o),_e=["checked"],ye=he(()=>e.createElementVNode("label",{for:"checbox"},null,-1));var ke=f(e.defineComponent({props:{checked:{type:Boolean,required:!0}},emits:["change"],setup(o,{emit:h}){e.useCssVars(a=>({"20cfc5a0":e.unref(l)}));const l=e.inject("themeColor");return(a,g)=>(e.openBlock(),e.createElementBlock("div",{class:"single-select__checkbox",onClick:g[0]||(g[0]=e.withModifiers(x=>h("change"),["stop","prevent"]))},[e.createElementVNode("input",{type:"checkbox",checked:o.checked},null,8,_e),ye]))}}),[["__scopeId","data-v-39f156fd"]]),yt="";const xe=o=>(e.pushScopeId("data-v-384d1036"),o=o(),e.popScopeId(),o),be={class:"easy-data-table__rows-selector"},Ce={class:"rows-input"},Pe=xe(()=>e.createElementVNode("div",{class:"triangle"},null,-1)),Ne=["onClick"];var Se=f(e.defineComponent({props:{modelValue:{type:Number,required:!0},rowsItems:{type:Array,required:!0}},emits:["update:modelValue"],setup(o,{emit:h}){const l=o;e.useCssVars(b=>({"40595ee7":e.unref(S)}));const a=e.ref(!1),g=e.ref(!1),x=e.inject("dataTable");e.watch(a,b=>{if(b&&x){const d=window.innerHeight,k=x.value.getBoundingClientRect().height,C=x.value.getBoundingClientRect().top;d-(k+C)<=100?g.value=!0:g.value=!1}});const w=e.computed({get:()=>l.modelValue,set:b=>{h("update:modelValue",b)}}),u=b=>{w.value=b,a.value=!1},s=(b,d)=>{let k=b.parentNode;for(;k!=null;){if(k.classList&&k.classList.contains(d))return!0;k=k.parentNode}return!1},p=b=>{s(b.target,"easy-data-table__rows-selector")||(a.value=!1)};e.onMounted(()=>{document.addEventListener("click",p)}),e.onBeforeUnmount(()=>{document.removeEventListener("click",p)});const S=e.inject("themeColor");return(b,d)=>(e.openBlock(),e.createElementBlock("div",be,[e.createElementVNode("div",{class:"rows-input__wrapper",onClick:d[0]||(d[0]=k=>a.value=!a.value)},[e.createElementVNode("div",Ce,e.toDisplayString(e.unref(w)),1),Pe]),e.createElementVNode("ul",{class:e.normalizeClass(["select-items",{show:a.value,inside:g.value}])},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(o.rowsItems,k=>(e.openBlock(),e.createElementBlock("li",{key:k,class:e.normalizeClass({selected:k===e.unref(w)}),onClick:C=>u(k)},e.toDisplayString(k),11,Ne))),128))],2)]))}}),[["__scopeId","data-v-384d1036"]]),xt="";const z=o=>(e.pushScopeId("data-v-1fa3a520"),o=o(),e.popScopeId(),o),Be={class:"lds-ring"},we=[z(()=>e.createElementVNode("div",null,null,-1)),z(()=>e.createElementVNode("div",null,null,-1)),z(()=>e.createElementVNode("div",null,null,-1)),z(()=>e.createElementVNode("div",null,null,-1))];var Ie=f(e.defineComponent({setup(o){e.useCssVars(l=>({"26774109":e.unref(h)}));const h=e.inject("themeColor");return(l,a)=>(e.openBlock(),e.createElementBlock("div",Be,we))}}),[["__scopeId","data-v-1fa3a520"]]),Bt="";const $e={class:"loader-line"};var Ee=f(e.defineComponent({setup(o){e.useCssVars(l=>({"0d327f57":e.unref(h)}));const h=e.inject("themeColor");return(l,a)=>(e.openBlock(),e.createElementBlock("div",$e))}}),[["__scopeId","data-v-7d281cac"]]),It="";const Ve={class:"buttons-pagination"},Fe=["onClick"];var ve=f(e.defineComponent({props:{maxPaginationNumber:{type:Number,required:!0},currentPaginationNumber:{type:Number,required:!0}},emits:["updatePage"],setup(o,{emit:h}){const l=o;e.useCssVars(u=>({"3e6f6a47":e.unref(w)}));const a=7,g=u=>{u.type==="button"&&!u.active&&h("updatePage",u.page)},x=e.computed(()=>{const u=[];if(l.maxPaginationNumber<=a)for(let s=1;s<=l.maxPaginationNumber;s+=1)u.push({type:"button",page:s,active:s===l.currentPaginationNumber,activePrev:s+1===l.currentPaginationNumber});else if([1,2,l.maxPaginationNumber,l.maxPaginationNumber-1].includes(l.currentPaginationNumber))for(let s=1;s<=a;s+=1)if(s<=3)u.push({type:"button",page:s,active:s===l.currentPaginationNumber,activePrev:s+1===l.currentPaginationNumber});else if(s===4)u.push({type:"omission"});else{const p=l.maxPaginationNumber-(a-s);u.push({type:"button",page:p,active:p===l.currentPaginationNumber,activePrev:s+1===l.currentPaginationNumber})}else if([3,4].includes(l.currentPaginationNumber))for(let s=1;s<=a;s+=1)s<=5?u.push({type:"button",page:s,active:s===l.currentPaginationNumber,activePrev:s+1===l.currentPaginationNumber}):s===6?u.push({type:"omission"}):u.push({type:"button",page:l.maxPaginationNumber,active:l.maxPaginationNumber===l.currentPaginationNumber,activePrev:s+1===l.currentPaginationNumber});else if([l.maxPaginationNumber-2,l.maxPaginationNumber-3].includes(l.currentPaginationNumber))for(let s=1;s<=a;s+=1)if(s===1)u.push({type:"button",page:1,active:l.currentPaginationNumber===1,activePrev:s+1===l.currentPaginationNumber});else if(s===2)u.push({type:"omission"});else{const p=l.maxPaginationNumber-(a-s);u.push({type:"button",page:p,active:p===l.currentPaginationNumber,activePrev:s+1===l.currentPaginationNumber})}else for(let s=1;s<=a;s+=1)if(s===1)u.push({type:"button",page:1,active:l.currentPaginationNumber===1,activePrev:s+1===l.currentPaginationNumber});else if(s===2||s===6)u.push({type:"omission"});else if(s===7)u.push({type:"button",page:l.maxPaginationNumber,active:l.maxPaginationNumber===l.currentPaginationNumber,activePrev:s+1===l.currentPaginationNumber});else{const p=4-s,S=l.currentPaginationNumber-p;u.push({type:"button",page:S,active:S===l.currentPaginationNumber,activePrev:s+1===l.currentPaginationNumber})}return u}),w=e.inject("themeColor");return(u,s)=>(e.openBlock(),e.createElementBlock("div",Ve,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(x),(p,S)=>(e.openBlock(),e.createElementBlock("div",{key:S,class:e.normalizeClass(["item",{button:p.type==="button",active:p.type==="button"&&p.active,"active-prev":p.type==="button"&&p.activePrev,omission:p.type==="omission"}]),onClick:b=>g(p)},e.toDisplayString(p.type==="button"?p.page:"..."),11,Fe))),128))]))}}),[["__scopeId","data-v-0a59da16"]]),Et="";const G=o=>(e.pushScopeId("data-v-c9da5286"),o=o(),e.popScopeId(),o),Te=[G(()=>e.createElementVNode("span",{class:"arrow arrow-right"},null,-1))],Le=[G(()=>e.createElementVNode("span",{class:"arrow arrow-left"},null,-1))];var Oe=f(e.defineComponent({props:{isFirstPage:{type:Boolean,required:!1},isLastPage:{type:Boolean,required:!1}},emits:["clickPrevPage","clickNextPage"],setup(o,{emit:h}){const l=e.useSlots();return(a,g)=>(e.openBlock(),e.createElementBlock(e.Fragment,null,[e.createElementVNode("div",{class:e.normalizeClass(["previous-page__click-button",{"first-page":o.isFirstPage}]),onClick:g[0]||(g[0]=x=>h("clickPrevPage"))},Te,2),e.unref(l).buttonsPagination?e.renderSlot(a.$slots,"buttonsPagination",{key:0},void 0,!0):e.createCommentVNode("",!0),e.createElementVNode("div",{class:e.normalizeClass(["next-page__click-button",{"last-page":o.isLastPage}]),onClick:g[1]||(g[1]=x=>h("clickNextPage"))},Le,2)],64))}}),[["__scopeId","data-v-c9da5286"]]),Tt="",Lt="";const Re=o=>(e.pushScopeId("data-v-6d611f3f"),o=o(),e.popScopeId(),o),ze=["onClick"],He={key:1,class:"header"},Ae={key:1,class:"header-text"},De=["onClick"],Me=["onClick"],je=["colspan"],qe={key:0,class:"vue3-easy-data-table__loading"},We=Re(()=>e.createElementVNode("div",{class:"vue3-easy-data-table__loading-mask"},null,-1)),Je={class:"loading-entity"},Ue={key:1,class:"vue3-easy-data-table__message"},Ge={key:0,class:"vue3-easy-data-table__footer"},Ke={key:0,class:"pagination__rows-per-page"},Qe={class:"pagination__items-index"};var K=f(e.defineComponent({props:{alternating:{type:Boolean,default:!1},buttonsPagination:{type:Boolean,default:!1},checkboxColumnWidth:{type:Number,default:null},emptyMessage:{type:String,default:"No Available Data"},expandColumnWidth:{type:Number,default:36},filterOptions:{type:Array,default:null},fixedExpand:{type:Boolean,default:!1},fixedHeader:{type:Boolean,default:!0},fixedCheckbox:{type:Boolean,default:!1},fixedIndex:{type:Boolean,default:!1},headers:{type:Array,required:!0},hideFooter:{type:Boolean,default:!1},hideRowsPerPage:{type:Boolean,default:!1},hideHeader:{type:Boolean,default:!1},indexColumnWidth:{type:Number,default:60},items:{type:Array,required:!0},itemsSelected:{type:Array,default:null},loading:{type:Boolean,deault:!1},rowsPerPage:{type:Number,default:25},rowsItems:{type:Array,default:()=>[25,50,100]},rowsPerPageMessage:{type:String,default:"rows per page:"},searchField:{type:String,default:""},searchValue:{type:String,default:""},serverOptions:{type:Object,default:null},serverItemsLength:{type:Number,default:0},showIndex:{type:Boolean,default:!1},sortBy:{type:String,default:""},sortType:{type:String,default:"asc"},tableHeight:{type:Number,default:null},themeColor:{type:String,default:"#42b883"},tableClassName:{type:String,default:""},headerClassName:{type:String,default:""},headerItemClassName:{type:[Function,String],default:""},bodyRowClassName:{type:[Function,String],default:""},bodyItemClassName:{type:[Function,String],default:""},noHover:{type:Boolean,default:!1},borderCell:{type:Boolean,default:!1},mustSort:{type:Boolean,default:!1}},emits:["update:itemsSelected","update:serverOptions","clickRow","expandRow"],setup(o,{expose:h,emit:l}){const a=o;e.useCssVars(n=>({"832f48d4":e.unref(g)}));const g=e.computed(()=>a.tableHeight?`${a.tableHeight}px`:null);e.provide("themeColor",a.themeColor);const x=e.useSlots(),w=e.computed(()=>x.pagination),u=e.computed(()=>x.loading),s=e.computed(()=>x.expand),p=e.ref(),S=e.ref();e.provide("dataTable",p);const b=e.ref(!1);e.onMounted(()=>{S.value.addEventListener("scroll",()=>{b.value=S.value.scrollLeft>0})});const d=e.computed({get:()=>{if(a.serverOptions){const{page:n,rowsPerPage:r,sortBy:t,sortType:i}=a.serverOptions;return{page:n,rowsPerPage:r,sortBy:t!=null?t:null,sortType:i!=null?i:null}}return null},set:n=>{l("update:serverOptions",n)}}),k=e.computed(()=>a.itemsSelected!==null),C=e.computed(()=>d.value!==null),Xe=e.computed(()=>!C.value&&a.rowsItems.findIndex(n=>n===a.rowsPerPage)===-1?[a.rowsPerPage,...a.rowsItems]:a.rowsItems),Ye=()=>a.sortBy!==""?{sortBy:a.sortBy,sortDesc:a.sortType==="desc"}:null,E=e.ref(Ye()),H=e.computed(()=>a.headers.findIndex(n=>n.fixed)!==-1),Ze=e.computed(()=>H.value?a.headers.filter(n=>n.fixed):[]),et=e.computed(()=>a.headers.filter(n=>!n.fixed)),F=e.computed(()=>{var m;const r=[...Ze.value,...et.value].map(P=>{const T=P;return P.sortable&&(T.sortType="none"),d.value&&P.value===d.value.sortBy&&d.value.sortType&&(T.sortType=d.value.sortType),!C.value&&E.value&&P.value===E.value.sortBy&&(T.sortType=E.value.sortDesc?"desc":"asc"),T});let t=[];s.value?t=[a.fixedExpand||H.value?{text:"",value:"expand",fixed:!0,width:a.expandColumnWidth}:{text:"",value:"expand"},...r]:t=r;let i=[];a.showIndex?i=[a.fixedIndex||H.value?{text:"#",value:"index",fixed:!0,width:a.indexColumnWidth}:{text:"#",value:"index"},...t]:i=t;let c=[];return k.value?c=[a.fixedCheckbox||H.value?{text:"checkbox",value:"checkbox",fixed:!0,width:(m=a.checkboxColumnWidth)!=null?m:36}:{text:"checkbox",value:"checkbox"},...i]:c=i,c}),O=e.ref([]),tt=(n,r,t)=>{t.stopPropagation();const i=O.value.indexOf(n);i!==-1?O.value.splice(i,1):(l("expandRow",a.items.findIndex(c=>c===r)),O.value.push(n))},I=e.computed(()=>F.value.filter(n=>n.fixed)),Q=e.computed(()=>I.value.length?I.value[I.value.length-1].value:""),nt=n=>{var t;const r=(t=n.width)!=null?t:I.value.length?100:null;if(r)return`width: ${r}px; min-width: ${r}px;`},at=e.computed(()=>{if(!I.value.length)return[];const n=I.value.map(r=>{var t;return(t=r.width)!=null?t:100});return I.value.map((r,t)=>{var i,c;return{value:r.value,fixed:(i=r.fixed)!=null?i:!0,width:(c=r.width)!=null?c:100,distance:t===0?0:n.reduce((m,P,T)=>{let ie=m;return T<t&&(ie+=P),ie})}})}),X=(n,r="th")=>{if(!I.value.length)return;const t=at.value.find(i=>i.value===n);if(t)return`left: ${t.distance}px;z-index: ${r==="th"?3:1};position: sticky;`},Y=e.computed(()=>F.value.map(n=>n.value)),R=(n,r)=>{if(n.includes(".")){let t="";return n.split(".").forEach((c,m)=>{t=m===0?r[c]:t[c]}),t}return r[n]},ot=(n,r)=>{const t=R(n,r);return Array.isArray(t)?t.join(","):t},B=e.computed({get:()=>{var n;return(n=a.itemsSelected)!=null?n:[]},set:n=>{l("update:itemsSelected",n)}}),Z=e.computed(()=>{if(!C.value&&a.searchValue!==""){const n=new RegExp(a.searchValue,"i");return a.items.filter(r=>n.test(a.searchField!==""?r[a.searchField]:Object.values(r).join(" ")))}return a.items}),V=e.computed(()=>{let n=[...Z.value];return a.filterOptions?(a.filterOptions.forEach(r=>{n=n.filter(t=>{const{field:i,comparison:c,criteria:m}=r;if(typeof c=="function")return c(t[i],m);switch(c){case"=":return t[i]===m;case"!=":return t[i]!==m;case">":return t[i]>m;case"<":return t[i]<m;case"<=":return t[i]<=m;case">=":return t[i]>=m;case"between":return t[i]>=Math.min(...m)&&t[i]<=Math.max(...m);default:return t[i]===m}})}),n):Z.value}),A=e.computed(()=>B.value.length===0||B.value.every(r=>V.value.findIndex(t=>JSON.stringify(r)===JSON.stringify(t))===-1)?"noneSelected":B.value.length===V.value.length&&B.value.every(t=>V.value.findIndex(i=>JSON.stringify(t)===JSON.stringify(i))!==-1)?"allSelected":"partSelected"),_=e.ref(C.value?a.serverOptions.page:1),{items:ee}=e.toRefs(a);e.watch(ee,()=>{C.value||(_.value=1)},{deep:!0});const $=e.ref(C.value?a.serverOptions.rowsPerPage:a.rowsPerPage);e.watch($,n=>{d.value&&(d.value=L(N({},d.value),{page:1,rowsPerPage:n})),_.value=1});const lt=(n,r)=>{let t=null;r==="none"?t="asc":r==="asc"?t="desc":t=a.mustSort?"asc":null,d.value?d.value=L(N({},d.value),{sortBy:t!==null?n:null,sortType:t}):t===null?E.value=null:E.value={sortBy:n,sortDesc:t==="desc"}},te=e.computed(()=>{if(C.value)return a.items;if(E.value===null)return V.value;const{sortBy:n,sortDesc:r}=E.value;return[...V.value].sort((i,c)=>R(n,i)<R(n,c)?r?1:-1:R(n,i)>R(n,c)?r?-1:1:0)}),D=e.computed(()=>C.value?a.serverItemsLength:V.value.length),ne=e.computed(()=>C.value?Math.min(D.value,_.value*$.value):Math.min(V.value.length,_.value*$.value)),ae=e.computed(()=>(_.value-1)*$.value+1),M=e.computed(()=>Math.ceil(D.value/$.value)),j=e.computed(()=>_.value===M.value),q=e.computed(()=>_.value===1),{loading:v}=e.toRefs(a),J=()=>{if(!j.value&&!v.value)if(d.value){const n=_.value+1;d.value=L(N({},d.value),{page:n})}else _.value+=1},U=()=>{if(!q.value&&!v.value)if(d.value){const n=_.value-1;d.value=L(N({},d.value),{page:n})}else _.value-=1},oe=n=>{v.value||(d.value?d.value=L(N({},d.value),{page:n}):_.value=n)};e.watch(v,(n,r)=>{d.value&&n===!1&&r===!0&&(_.value=d.value.page)});const le=e.computed(()=>C.value?a.items:te.value.slice(ae.value-1,ne.value)),re=e.computed(()=>$.value*(_.value-1)+1),rt=e.computed(()=>$.value*_.value),W=e.computed(()=>a.showIndex?le.value.map((n,r)=>N({index:re.value+r},n)):le.value),se=e.computed(()=>k.value?A.value==="allSelected"?W.value.map(n=>N({checkbox:!0},n)):A.value==="noneSelected"?W.value.map(n=>N({checkbox:!1},n)):W.value.map(n=>{const r=B.value.findIndex(t=>{const i=N({},n);return delete i.index,JSON.stringify(t)===JSON.stringify(i)})!==-1;return N({checkbox:r},n)}):W.value),st=n=>{B.value=n?te.value:[]},it=n=>{const r=n.checkbox;if(delete n.checkbox,delete n.index,r)B.value=B.value.filter(t=>JSON.stringify(t)!==JSON.stringify(n));else{const t=B.value;t.unshift(n),B.value=t}},ct=n=>{const r=N({},n);if(k.value){const{checkbox:t}=n;delete r.checkbox,r.isSelected=t}if(a.showIndex){const{index:t}=n;delete r.index,r.indexInCurrentPage=t}l("clickRow",r)};return h({clientItemsLength:D,currentPageFirstIndex:re,currentPageLastIndex:rt,maxPaginationNumber:M,currentPaginationNumber:_,isLastPage:j,isFirstPage:q,nextPage:J,prevPage:U,updatePage:oe}),(n,r)=>(e.openBlock(),e.createElementBlock("div",{ref_key:"dataTable",ref:p,class:e.normalizeClass(["vue3-easy-data-table",[o.tableClassName]])},[e.createElementVNode("div",{ref_key:"tableBody",ref:S,class:e.normalizeClass(["vue3-easy-data-table__main",{"fixed-header":o.fixedHeader,"fixed-height":o.tableHeight,"show-shadow":b.value,"table-fixed":e.unref(I).length,hoverable:!o.noHover,"border-cell":o.borderCell}])},[e.createElementVNode("table",null,[e.createElementVNode("colgroup",null,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(F),(t,i)=>(e.openBlock(),e.createElementBlock("col",{key:i,style:e.normalizeStyle(nt(t))},null,4))),128))]),e.unref(F).length&&!o.hideHeader?(e.openBlock(),e.createElementBlock("thead",{key:0,class:e.normalizeClass(["vue3-easy-data-table__header",[o.headerClassName]])},[e.createElementVNode("tr",null,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(F),(t,i)=>(e.openBlock(),e.createElementBlock("th",{key:i,class:e.normalizeClass([{sortable:t.sortable,none:t.sortable&&t.sortType==="none",desc:t.sortable&&t.sortType==="desc",asc:t.sortable&&t.sortType==="asc",shadow:t.value===e.unref(Q)},typeof o.headerItemClassName=="string"?o.headerItemClassName:o.headerItemClassName(t,i)]),style:e.normalizeStyle(X(t.value)),onClick:e.withModifiers(c=>t.sortable&&t.sortType?lt(t.value,t.sortType):null,["stop"])},[t.text==="checkbox"?(e.openBlock(),e.createBlock(ge,{key:e.unref(A),status:e.unref(A),onChange:st},null,8,["status"])):(e.openBlock(),e.createElementBlock("span",He,[e.unref(x)[`header-${t.value}`]?e.renderSlot(n.$slots,`header-${t.value}`,e.normalizeProps(e.mergeProps({key:0},t)),void 0,!0):(e.openBlock(),e.createElementBlock("span",Ae,e.toDisplayString(t.text),1)),t.sortable?(e.openBlock(),e.createElementBlock("i",{key:t.sortType?t.sortType:"none",class:e.normalizeClass(["sortType-icon",{desc:t.sortType==="desc"}])},null,2)):e.createCommentVNode("",!0)]))],14,ze))),128))])],2)):e.createCommentVNode("",!0),e.unref(ee).length&&e.unref(Y).length?(e.openBlock(),e.createElementBlock("tbody",{key:1,class:e.normalizeClass(["vue3-easy-data-table__body",{"row-alternation":o.alternating}])},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(se),(t,i)=>(e.openBlock(),e.createElementBlock(e.Fragment,{key:i},[e.createElementVNode("tr",{class:e.normalizeClass([{"even-row":(i+1)%2===0},typeof o.bodyRowClassName=="string"?o.bodyRowClassName:o.bodyRowClassName(t,i)]),onClick:c=>ct(t)},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(Y),(c,m)=>(e.openBlock(),e.createElementBlock("td",{key:m,style:e.normalizeStyle(X(c,"td")),class:e.normalizeClass([{shadow:c===e.unref(Q),"can-expand":c==="expand"},typeof o.bodyItemClassName=="string"?o.bodyItemClassName:o.bodyItemClassName(c,m)]),onClick:P=>c==="expand"?tt(i,t,P):null},[e.unref(x)[`item-${c}`]?e.renderSlot(n.$slots,`item-${c}`,e.normalizeProps(e.mergeProps({key:0},t)),void 0,!0):c==="expand"?(e.openBlock(),e.createElementBlock("i",{key:1,class:e.normalizeClass(["expand-icon",{expanding:O.value.includes(i)}])},null,2)):c==="checkbox"?(e.openBlock(),e.createBlock(ke,{key:2,checked:t[c],onChange:P=>it(t)},null,8,["checked","onChange"])):(e.openBlock(),e.createElementBlock(e.Fragment,{key:3},[e.createTextVNode(e.toDisplayString(ot(c,t)),1)],64))],14,Me))),128))],10,De),e.unref(s)&&O.value.includes(i)?(e.openBlock(),e.createElementBlock("tr",{key:0,class:e.normalizeClass({"even-row":(i+1)%2===0})},[e.createElementVNode("td",{colspan:e.unref(F).length,class:"expand"},[t.expandLoading?(e.openBlock(),e.createBlock(Ee,{key:0,class:"expand-loading"})):e.createCommentVNode("",!0),e.renderSlot(n.$slots,"expand",e.normalizeProps(e.guardReactiveProps(t)),void 0,!0)],8,je)],2)):e.createCommentVNode("",!0)],64))),128))],2)):e.createCommentVNode("",!0)]),e.unref(v)?(e.openBlock(),e.createElementBlock("div",qe,[We,e.createElementVNode("div",Je,[e.unref(u)?e.renderSlot(n.$slots,"loading",{key:0},void 0,!0):(e.openBlock(),e.createBlock(Ie,{key:1}))])])):e.createCommentVNode("",!0),!e.unref(se).length&&!e.unref(v)?(e.openBlock(),e.createElementBlock("div",Ue,e.toDisplayString(o.emptyMessage),1)):e.createCommentVNode("",!0)],2),o.hideFooter?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("div",Ge,[o.hideRowsPerPage?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("div",Ke,[e.createTextVNode(e.toDisplayString(o.rowsPerPageMessage)+" ",1),e.createVNode(Se,{modelValue:$.value,"onUpdate:modelValue":r[0]||(r[0]=t=>$.value=t),"rows-items":e.unref(Xe)},null,8,["modelValue","rows-items"])])),e.createElementVNode("div",Qe,e.toDisplayString(`${e.unref(ae)}\u2013${e.unref(ne)}`)+" of "+e.toDisplayString(e.unref(D)),1),e.unref(w)?e.renderSlot(n.$slots,"pagination",e.normalizeProps(e.mergeProps({key:1},{isFirstPage:e.unref(q),isLastPage:e.unref(j),currentPaginationNumber:_.value,maxPaginationNumber:e.unref(M),nextPage:J,prevPage:U})),void 0,!0):(e.openBlock(),e.createBlock(Oe,{key:2,"is-first-page":e.unref(q),"is-last-page":e.unref(j),onClickNextPage:J,onClickPrevPage:U},e.createSlots({_:2},[o.buttonsPagination?{name:"buttonsPagination",fn:e.withCtx(()=>[e.createVNode(ve,{"current-pagination-number":_.value,"max-pagination-number":e.unref(M),onUpdatePage:oe},null,8,["current-pagination-number","max-pagination-number"])])}:void 0]),1032,["is-first-page","is-last-page"]))]))],2))}}),[["__scopeId","data-v-6d611f3f"]]);return typeof window!="undefined"&&window.Vue&&window.Vue.createApp({}).component("Vue3EasyDataTable",K),K});
+(function(e,P){typeof exports=="object"&&typeof module!="undefined"?module.exports=P(require("vue")):typeof define=="function"&&define.amd?define(["vue"],P):(e=typeof globalThis!="undefined"?globalThis:e||self,e["vue3-easy-data-table"]=P(e.Vue))})(this,function(e){"use strict";var vt=Object.defineProperty,Ft=Object.defineProperties;var Lt=Object.getOwnPropertyDescriptors;var xe=Object.getOwnPropertySymbols;var Tt=Object.prototype.hasOwnProperty,Rt=Object.prototype.propertyIsEnumerable;var ke=(e,P,x)=>P in e?vt(e,P,{enumerable:!0,configurable:!0,writable:!0,value:x}):e[P]=x,v=(e,P)=>{for(var x in P||(P={}))Tt.call(P,x)&&ke(e,x,P[x]);if(xe)for(var x of xe(P))Rt.call(P,x)&&ke(e,x,P[x]);return e},G=(e,P)=>Ft(e,Lt(P));var P="",x=(n,o)=>{const t=n.__vccOpts||n;for(const[i,c]of o)t[i]=c;return t};const be=n=>(e.pushScopeId("data-v-1eac0f74"),n=n(),e.popScopeId(),n),Pe=["onClick"],Ce=["checked"],Ne=be(()=>e.createElementVNode("label",{for:"checbox"},null,-1));var Se=x(e.defineComponent({props:{status:{type:String,required:!0}},emits:["change"],setup(n,{emit:o}){const t=n;e.useCssVars(l=>({d6c6074e:e.unref(s)}));const i=e.computed(()=>t.status==="allSelected"),c=()=>{o("change",!i.value)},s=e.inject("themeColor");return(l,r)=>(e.openBlock(),e.createElementBlock("div",{class:"easy-checkbox",onClick:e.withModifiers(c,["stop","prevent"])},[e.createElementVNode("input",{type:"checkbox",checked:e.unref(i),class:e.normalizeClass(n.status)},null,10,Ce),Ne],8,Pe))}}),[["__scopeId","data-v-1eac0f74"]]),zt="";const Be=n=>(e.pushScopeId("data-v-7e69a276"),n=n(),e.popScopeId(),n),we=["checked"],Ie=Be(()=>e.createElementVNode("label",{for:"checbox"},null,-1));var Ee=x(e.defineComponent({props:{checked:{type:Boolean,required:!0}},emits:["change"],setup(n,{emit:o}){e.useCssVars(i=>({fdaf7e9e:e.unref(t)}));const t=e.inject("themeColor");return(i,c)=>(e.openBlock(),e.createElementBlock("div",{class:"easy-checkbox",onClick:c[0]||(c[0]=e.withModifiers(s=>o("change"),["stop","prevent"]))},[e.createElementVNode("input",{type:"checkbox",checked:n.checked},null,8,we),Ie]))}}),[["__scopeId","data-v-7e69a276"]]),Ht="";const $e=n=>(e.pushScopeId("data-v-384d1036"),n=n(),e.popScopeId(),n),Ve={class:"easy-data-table__rows-selector"},ve={class:"rows-input"},Fe=$e(()=>e.createElementVNode("div",{class:"triangle"},null,-1)),Le=["onClick"];var Te=x(e.defineComponent({props:{modelValue:{type:Number,required:!0},rowsItems:{type:Array,required:!0}},emits:["update:modelValue"],setup(n,{emit:o}){const t=n;e.useCssVars(m=>({"40595ee7":e.unref(y)}));const i=e.ref(!1),c=e.ref(!1),s=e.inject("dataTable");e.watch(i,m=>{if(m&&s){const _=window.innerHeight,f=s.value.getBoundingClientRect().height,k=s.value.getBoundingClientRect().top;_-(f+k)<=100?c.value=!0:c.value=!1}});const l=e.computed({get:()=>t.modelValue,set:m=>{o("update:modelValue",m)}}),r=m=>{l.value=m,i.value=!1},a=(m,_)=>{let f=m.parentNode;for(;f!=null;){if(f.classList&&f.classList.contains(_))return!0;f=f.parentNode}return!1},d=m=>{a(m.target,"easy-data-table__rows-selector")||(i.value=!1)};e.onMounted(()=>{document.addEventListener("click",d)}),e.onBeforeUnmount(()=>{document.removeEventListener("click",d)});const y=e.inject("themeColor");return(m,_)=>(e.openBlock(),e.createElementBlock("div",Ve,[e.createElementVNode("div",{class:"rows-input__wrapper",onClick:_[0]||(_[0]=f=>i.value=!i.value)},[e.createElementVNode("div",ve,e.toDisplayString(e.unref(l)),1),Fe]),e.createElementVNode("ul",{class:e.normalizeClass(["select-items",{show:i.value,inside:c.value}])},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(n.rowsItems,f=>(e.openBlock(),e.createElementBlock("li",{key:f,class:e.normalizeClass({selected:f===e.unref(l)}),onClick:k=>r(f)},e.toDisplayString(f),11,Le))),128))],2)]))}}),[["__scopeId","data-v-384d1036"]]),jt="";const q=n=>(e.pushScopeId("data-v-1fa3a520"),n=n(),e.popScopeId(),n),Re={class:"lds-ring"},Oe=[q(()=>e.createElementVNode("div",null,null,-1)),q(()=>e.createElementVNode("div",null,null,-1)),q(()=>e.createElementVNode("div",null,null,-1)),q(()=>e.createElementVNode("div",null,null,-1))];var ze=x(e.defineComponent({setup(n){e.useCssVars(t=>({"26774109":e.unref(o)}));const o=e.inject("themeColor");return(t,i)=>(e.openBlock(),e.createElementBlock("div",Re,Oe))}}),[["__scopeId","data-v-1fa3a520"]]),Gt="";const Ae={class:"loader-line"};var He=x(e.defineComponent({setup(n){e.useCssVars(t=>({"0d327f57":e.unref(o)}));const o=e.inject("themeColor");return(t,i)=>(e.openBlock(),e.createElementBlock("div",Ae))}}),[["__scopeId","data-v-7d281cac"]]),Qt="";const De={class:"buttons-pagination"},je=["onClick"];var Me=x(e.defineComponent({props:{maxPaginationNumber:{type:Number,required:!0},currentPaginationNumber:{type:Number,required:!0}},emits:["updatePage"],setup(n,{emit:o}){const t=n;e.useCssVars(r=>({"40dd4f07":e.unref(l)}));const i=7,c=r=>{r.type==="button"&&!r.active&&o("updatePage",r.page)},s=e.computed(()=>{const r=[];if(t.maxPaginationNumber<=i)for(let a=1;a<=t.maxPaginationNumber;a+=1)r.push({type:"button",page:a,active:a===t.currentPaginationNumber,activePrev:a+1===t.currentPaginationNumber});else if([1,2,t.maxPaginationNumber,t.maxPaginationNumber-1].includes(t.currentPaginationNumber))for(let a=1;a<=i;a+=1)if(a<=3)r.push({type:"button",page:a,active:a===t.currentPaginationNumber,activePrev:a+1===t.currentPaginationNumber});else if(a===4)r.push({type:"omission"});else{const d=t.maxPaginationNumber-(i-a);r.push({type:"button",page:d,active:d===t.currentPaginationNumber,activePrev:d+1===t.currentPaginationNumber})}else if([3,4].includes(t.currentPaginationNumber))for(let a=1;a<=i;a+=1)a<=5?r.push({type:"button",page:a,active:a===t.currentPaginationNumber,activePrev:a+1===t.currentPaginationNumber}):a===6?r.push({type:"omission"}):r.push({type:"button",page:t.maxPaginationNumber,active:t.maxPaginationNumber===t.currentPaginationNumber,activePrev:a+1===t.currentPaginationNumber});else if([t.maxPaginationNumber-2,t.maxPaginationNumber-3].includes(t.currentPaginationNumber))for(let a=1;a<=i;a+=1)if(a===1)r.push({type:"button",page:1,active:t.currentPaginationNumber===1,activePrev:a+1===t.currentPaginationNumber});else if(a===2)r.push({type:"omission"});else{const d=t.maxPaginationNumber-(i-a);r.push({type:"button",page:d,active:d===t.currentPaginationNumber,activePrev:d+1===t.currentPaginationNumber})}else for(let a=1;a<=i;a+=1)if(a===1)r.push({type:"button",page:1,active:t.currentPaginationNumber===1,activePrev:a+1===t.currentPaginationNumber});else if(a===2||a===6)r.push({type:"omission"});else if(a===7)r.push({type:"button",page:t.maxPaginationNumber,active:t.maxPaginationNumber===t.currentPaginationNumber,activePrev:a+1===t.currentPaginationNumber});else{const d=4-a,y=t.currentPaginationNumber-d;r.push({type:"button",page:y,active:y===t.currentPaginationNumber,activePrev:y+1===t.currentPaginationNumber})}return r}),l=e.inject("themeColor");return(r,a)=>(e.openBlock(),e.createElementBlock("div",De,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(s),(d,y)=>(e.openBlock(),e.createElementBlock("div",{key:y,class:e.normalizeClass(["item",{button:d.type==="button",active:d.type==="button"&&d.active,"active-prev":d.type==="button"&&d.activePrev,omission:d.type==="omission"}]),onClick:m=>c(d)},e.toDisplayString(d.type==="button"?d.page:"..."),11,je))),128))]))}}),[["__scopeId","data-v-4c681fa2"]]),Yt="";const oe=n=>(e.pushScopeId("data-v-c9da5286"),n=n(),e.popScopeId(),n),qe=[oe(()=>e.createElementVNode("span",{class:"arrow arrow-right"},null,-1))],We=[oe(()=>e.createElementVNode("span",{class:"arrow arrow-left"},null,-1))];var Je=x(e.defineComponent({props:{isFirstPage:{type:Boolean,required:!1},isLastPage:{type:Boolean,required:!1}},emits:["clickPrevPage","clickNextPage"],setup(n,{emit:o}){const t=e.useSlots();return(i,c)=>(e.openBlock(),e.createElementBlock(e.Fragment,null,[e.createElementVNode("div",{class:e.normalizeClass(["previous-page__click-button",{"first-page":n.isFirstPage}]),onClick:c[0]||(c[0]=s=>o("clickPrevPage"))},qe,2),e.unref(t).buttonsPagination?e.renderSlot(i.$slots,"buttonsPagination",{key:0},void 0,!0):e.createCommentVNode("",!0),e.createElementVNode("div",{class:e.normalizeClass(["next-page__click-button",{"last-page":n.isLastPage}]),onClick:c[1]||(c[1]=s=>o("clickNextPage"))},We,2)],64))}}),[["__scopeId","data-v-c9da5286"]]);function Ue(n,o,t){return{clickRow:c=>{const s=v({},c);if(n.value){const{checkbox:l}=c;delete s.checkbox,s.isSelected=l}if(o.value){const{index:l}=c;delete s.index,s.indexInCurrentPage=l}t("clickRow",s)}}}function Ge(n,o){const t=e.ref([]);return{expandingItemIndexList:t,updateExpandingItemIndexList:(c,s,l)=>{l.stopPropagation();const r=t.value.indexOf(c);r!==-1?t.value.splice(r,1):(o("expandRow",n.value.findIndex(a=>a===s)),t.value.push(c))}}}function Ke(n){const o=e.computed(()=>n.value.filter(c=>c.fixed)),t=e.computed(()=>o.value.length?o.value[o.value.length-1].value:""),i=e.computed(()=>{if(!o.value.length)return[];const c=o.value.map(s=>{var l;return(l=s.width)!=null?l:100});return o.value.map((s,l)=>{var r,a;return{value:s.value,fixed:(r=s.fixed)!=null?r:!0,width:(a=s.width)!=null?a:100,distance:l===0?0:c.reduce((d,y,m)=>{let _=d;return m<l&&(_+=y),_})}})});return{fixedHeaders:o,lastFixedColumn:t,fixedColumnsInfos:i}}function Qe(n,o,t,i,c,s,l,r,a,d,y,m,_,f,k,C){const p=e.computed(()=>s.value.findIndex(N=>N.fixed)!==-1),b=e.computed(()=>p.value?s.value.filter(N=>N.fixed):[]),g=e.computed(()=>s.value.filter(N=>!N.fixed)),h=e.ref((()=>f.value!==""?{sortBy:f.value,sortDesc:k.value==="desc"}:null)()),$=e.computed(()=>{var T;const R=[...b.value,...g.value].map(F=>{const z=F;return F.sortable&&(z.sortType="none"),m.value&&F.value===m.value.sortBy&&m.value.sortType&&(z.sortType=m.value.sortType),!d.value&&h.value&&F.value===h.value.sortBy&&(z.sortType=h.value.sortDesc?"desc":"asc"),z});let w=[];l.value?w=[i.value||p.value?{text:"",value:"expand",fixed:!0,width:o.value}:{text:"",value:"expand"},...R]:w=R;let L=[];_.value?L=[c.value||p.value?{text:"#",value:"index",fixed:!0,width:r.value}:{text:"#",value:"index"},...w]:L=w;let j=[];return a.value?j=[t.value||p.value?{text:"checkbox",value:"checkbox",fixed:!0,width:(T=n.value)!=null?T:36}:{text:"checkbox",value:"checkbox"},...L]:j=L,j}),S=e.computed(()=>$.value.map(N=>N.value));return{clientSortOptions:h,headerColumns:S,headersForRender:$,updateSortField:(N,R)=>{let w=null;R==="none"?w="asc":R==="asc"?w="desc":w=y.value?"asc":null,d.value?C(N,w):w===null?h.value=null:h.value={sortBy:N,sortDesc:w==="desc"}}}}function Xe(n,o,t,i,c,s,l,r,a){const d=e.computed(()=>(n.value-1)*c.value+1),y=e.computed(()=>t.value?Math.min(a.value,n.value*c.value):Math.min(r.value.length,n.value*c.value)),m=e.computed(()=>t.value?i.value:r.value.slice(d.value-1,y.value)),_=e.computed(()=>l.value?m.value.map((C,p)=>v({index:d.value+p},C)):m.value),f=e.computed(()=>s.value.length===0||s.value.every(p=>r.value.findIndex(b=>JSON.stringify(p)===JSON.stringify(b))===-1)?"noneSelected":s.value.length===r.value.length&&s.value.every(b=>r.value.findIndex(g=>JSON.stringify(b)===JSON.stringify(g))!==-1)?"allSelected":"partSelected"),k=e.computed(()=>o.value?f.value==="allSelected"?_.value.map(C=>v({checkbox:!0},C)):f.value==="noneSelected"?_.value.map(C=>v({checkbox:!1},C)):_.value.map(C=>{const p=s.value.findIndex(b=>{const g=v({},C);return delete g.index,JSON.stringify(b)===JSON.stringify(g)})!==-1;return v({checkbox:p},C)}):_.value);return{firstIndexOfItemsInCurrentPage:d,lastIndexOfItemsInCurrentPage:y,multipleSelectStatus:f,pageItems:k}}function Ye(n,o,t,i,c,s){const l=e.ref(c.value?c.value.page:1),r=e.computed(()=>Math.ceil(t.value/i.value)),a=e.computed(()=>l.value===r.value),d=e.computed(()=>l.value===1);return{currentPaginationNumber:l,maxPaginationNumber:r,isLastPage:a,isFirstPage:d,nextPage:()=>{if(!a.value&&!o.value)if(n.value){const k=l.value+1;s(k)}else l.value+=1},prevPage:()=>{if(!d.value&&!o.value)if(n.value){const k=l.value-1;s(k)}else l.value-=1},updatePage:k=>{o.value||(n.value?s(k):l.value=k)},updateCurrentPaginationNumber:k=>{l.value=k}}}function Ze(n,o,t,i){const c=e.computed(()=>!n.value&&o.value.findIndex(l=>l===i.value)===-1?[i.value,...o.value]:o.value),s=e.ref(t.value?t.value.rowsPerPage:i.value);return{rowsItemsComputed:c,rowsPerPageReactive:s}}function et(n,o){const t=e.computed({get:()=>{if(n.value){const{page:l,rowsPerPage:r,sortBy:a,sortType:d}=n.value;return{page:l,rowsPerPage:r,sortBy:a!=null?a:null,sortType:d!=null?d:null}}return null},set:l=>{o("update:serverOptions",l)}});return{serverOptionsComputed:t,updateServerOptionsPage:l=>{t.value&&(t.value=G(v({},t.value),{page:l}))},updateServerOptionsSort:(l,r)=>{t.value&&(t.value=G(v({},t.value),{sortBy:r!==null?l:null,sortType:r}))},updateServerOptionsRowsPerPage:l=>{t.value&&(t.value=G(v({},t.value),{page:1,rowsPerPage:l}))}}}function H(n,o){if(n.includes(".")){let t="";return n.split(".").forEach((c,s)=>{t=s===0?o[c]:t[c]}),t}return o[n]}function tt(n,o){const t=H(n,o);return Array.isArray(t)?t.join(","):t}function nt(n,o,t,i,c,s,l,r,a){const d=e.computed(()=>{if(!t.value&&l.value!==""){const p=new RegExp(l.value,"i");return i.value.filter(b=>p.test(s.value!==""?b[s.value]:Object.values(b).join(" ")))}return i.value}),y=e.computed(()=>{let p=[...d.value];return o.value?(o.value.forEach(b=>{p=p.filter(g=>{const{field:h,comparison:$,criteria:S}=b;if(typeof $=="function")return $(g[h],S);switch($){case"=":return g[h]===S;case"!=":return g[h]!==S;case">":return g[h]>S;case"<":return g[h]<S;case"<=":return g[h]<=S;case">=":return g[h]>=S;case"between":return g[h]>=Math.min(...S)&&g[h]<=Math.max(...S);default:return g[h]===S}})}),p):d.value}),m=e.computed(()=>{if(t.value)return i.value;if(n.value===null)return y.value;const{sortBy:p,sortDesc:b}=n.value;return[...y.value].sort((h,$)=>H(p,h)<H(p,$)?b?1:-1:H(p,h)>H(p,$)?b?-1:1:0)}),_=e.computed(()=>t.value?r.value:m.value.length),f=e.computed({get:()=>{var p;return(p=c.value)!=null?p:[]},set:p=>{a("update:itemsSelected",p)}});return{totalItems:m,selectItemsComputed:f,totalItemsLength:_,toggleSelectAll:p=>{f.value=p?m.value:[]},toggleSelectItem:p=>{const b=p.checkbox;if(delete p.checkbox,delete p.index,b)f.value=f.value.filter(g=>JSON.stringify(g)!==JSON.stringify(p));else{const g=f.value;g.unshift(p),f.value=g}}}}var nn="",an="";const at=n=>(e.pushScopeId("data-v-13c5baed"),n=n(),e.popScopeId(),n),ot=["onClick"],lt={key:1,class:"header"},rt={key:1,class:"header-text"},st=["onClick"],it=["onClick"],ct=["colspan"],dt={key:0,class:"vue3-easy-data-table__loading"},ut=at(()=>e.createElementVNode("div",{class:"vue3-easy-data-table__loading-mask"},null,-1)),pt={class:"loading-entity"},ft={key:1,class:"vue3-easy-data-table__message"},mt={key:0,class:"vue3-easy-data-table__footer"},gt={key:0,class:"pagination__rows-per-page"},ht={class:"pagination__items-index"};var le=x(e.defineComponent({props:{alternating:{type:Boolean,default:!1},buttonsPagination:{type:Boolean,default:!1},checkboxColumnWidth:{type:Number,default:null},emptyMessage:{type:String,default:"No Available Data"},expandColumnWidth:{type:Number,default:36},filterOptions:{type:Array,default:null},fixedExpand:{type:Boolean,default:!1},fixedHeader:{type:Boolean,default:!0},fixedCheckbox:{type:Boolean,default:!1},fixedIndex:{type:Boolean,default:!1},headers:{type:Array,required:!0},hideFooter:{type:Boolean,default:!1},hideRowsPerPage:{type:Boolean,default:!1},hideHeader:{type:Boolean,default:!1},indexColumnWidth:{type:Number,default:60},items:{type:Array,required:!0},itemsSelected:{type:Array,default:null},loading:{type:Boolean,deault:!1},rowsPerPage:{type:Number,default:25},rowsItems:{type:Array,default:()=>[25,50,100]},rowsPerPageMessage:{type:String,default:"rows per page:"},searchField:{type:String,default:""},searchValue:{type:String,default:""},serverOptions:{type:Object,default:null},serverItemsLength:{type:Number,default:0},showIndex:{type:Boolean,default:!1},sortBy:{type:String,default:""},sortType:{type:String,default:"asc"},tableHeight:{type:Number,default:null},themeColor:{type:String,default:"#42b883"},tableClassName:{type:String,default:""},headerClassName:{type:String,default:""},headerItemClassName:{type:[Function,String],default:""},bodyRowClassName:{type:[Function,String],default:""},bodyItemClassName:{type:[Function,String],default:""},noHover:{type:Boolean,default:!1},borderCell:{type:Boolean,default:!1},mustSort:{type:Boolean,default:!1}},emits:["clickRow","expandRow","update:itemsSelected","update:serverOptions"],setup(n,{expose:o,emit:t}){const i=n,{checkboxColumnWidth:c,expandColumnWidth:s,filterOptions:l,fixedCheckbox:r,fixedExpand:a,fixedHeader:d,fixedIndex:y,headers:m,indexColumnWidth:_,items:f,itemsSelected:k,loading:C,mustSort:p,rowsItems:b,rowsPerPage:g,searchField:h,searchValue:$,serverItemsLength:S,serverOptions:D,showIndex:N,sortBy:R,sortType:w,tableHeight:L,themeColor:j}=e.toRefs(i);e.computed(()=>L.value?`${L.value}px`:null),e.provide("themeColor",j.value);const T=e.useSlots(),F=e.computed(()=>!!T.pagination),z=e.computed(()=>!!T.loading),re=e.computed(()=>!!T.expand),se=e.ref(),K=e.ref();e.provide("dataTable",se);const ie=e.ref(!1);e.onMounted(()=>{K.value.addEventListener("scroll",()=>{ie.value=K.value.scrollLeft>0})});const Q=e.computed(()=>k.value!==null),O=e.computed(()=>D.value!==null),{serverOptionsComputed:X,updateServerOptionsPage:_t,updateServerOptionsSort:yt,updateServerOptionsRowsPerPage:xt}=et(D,t),{clientSortOptions:kt,headerColumns:ce,headersForRender:M,updateSortField:bt}=Qe(c,s,r,a,y,m,re,_,Q,O,p,X,N,R,w,yt),{rowsItemsComputed:Pt,rowsPerPageReactive:A}=Ze(O,b,D,g),{totalItems:Ct,selectItemsComputed:Nt,totalItemsLength:W,toggleSelectAll:St,toggleSelectItem:Bt}=nt(kt,l,O,f,k,h,$,S,t),{currentPaginationNumber:J,maxPaginationNumber:Y,isLastPage:Z,isFirstPage:ee,nextPage:te,prevPage:ne,updatePage:U,updateCurrentPaginationNumber:wt}=Ye(O,C,W,A,D,_t),{firstIndexOfItemsInCurrentPage:de,lastIndexOfItemsInCurrentPage:ue,multipleSelectStatus:pe,pageItems:fe}=Xe(J,Q,O,f,A,Nt,N,Ct,W),{expandingItemIndexList:me,updateExpandingItemIndexList:It}=Ge(f,t),{fixedHeaders:ae,lastFixedColumn:ge,fixedColumnsInfos:Et}=Ke(M),{clickRow:$t}=Ue(Q,N,t),Vt=I=>{var u;const V=(u=I.width)!=null?u:ae.value.length?100:null;if(V)return`width: ${V}px; min-width: ${V}px;`},he=(I,V="th")=>{if(!ae.value.length)return;const u=Et.value.find(B=>B.value===I);if(u)return`left: ${u.distance}px;z-index: ${V==="th"?3:1};position: sticky;`};return e.watch(C,(I,V)=>{X.value&&I===!1&&V===!0&&wt(X.value.page)}),e.watch(f,()=>{O.value||U(1)},{deep:!0}),e.watch(A,I=>{O.value?xt(I):U(1)}),o({firstIndexOfItemsInCurrentPage:de,lastIndexOfItemsInCurrentPage:ue,clientItemsLength:W,maxPaginationNumber:Y,currentPaginationNumber:J,isLastPage:Z,isFirstPage:ee,nextPage:te,prevPage:ne,updatePage:U}),(I,V)=>(e.openBlock(),e.createElementBlock("div",{ref_key:"dataTable",ref:se,class:e.normalizeClass(["vue3-easy-data-table",[n.tableClassName]])},[e.createElementVNode("div",{ref_key:"tableBody",ref:K,class:e.normalizeClass(["vue3-easy-data-table__main",{"fixed-header":e.unref(d),"fixed-height":e.unref(L),"show-shadow":ie.value,"table-fixed":e.unref(ae).length,hoverable:!n.noHover,"border-cell":n.borderCell}])},[e.createElementVNode("table",null,[e.createElementVNode("colgroup",null,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(M),(u,B)=>(e.openBlock(),e.createElementBlock("col",{key:B,style:e.normalizeStyle(Vt(u))},null,4))),128))]),e.unref(M).length&&!n.hideHeader?(e.openBlock(),e.createElementBlock("thead",{key:0,class:e.normalizeClass(["vue3-easy-data-table__header",[n.headerClassName]])},[e.createElementVNode("tr",null,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(M),(u,B)=>(e.openBlock(),e.createElementBlock("th",{key:B,class:e.normalizeClass([{sortable:u.sortable,none:u.sortable&&u.sortType==="none",desc:u.sortable&&u.sortType==="desc",asc:u.sortable&&u.sortType==="asc",shadow:u.value===e.unref(ge)},typeof n.headerItemClassName=="string"?n.headerItemClassName:n.headerItemClassName(u,B)]),style:e.normalizeStyle(he(u.value)),onClick:e.withModifiers(E=>u.sortable&&u.sortType?e.unref(bt)(u.value,u.sortType):null,["stop"])},[u.text==="checkbox"?(e.openBlock(),e.createBlock(Se,{key:e.unref(pe),status:e.unref(pe),onChange:e.unref(St)},null,8,["status","onChange"])):(e.openBlock(),e.createElementBlock("span",lt,[e.unref(T)[`header-${u.value}`]?e.renderSlot(I.$slots,`header-${u.value}`,e.normalizeProps(e.mergeProps({key:0},u)),void 0,!0):(e.openBlock(),e.createElementBlock("span",rt,e.toDisplayString(u.text),1)),u.sortable?(e.openBlock(),e.createElementBlock("i",{key:u.sortType?u.sortType:"none",class:e.normalizeClass(["sortType-icon",{desc:u.sortType==="desc"}])},null,2)):e.createCommentVNode("",!0)]))],14,ot))),128))])],2)):e.createCommentVNode("",!0),e.unref(f).length&&e.unref(ce).length?(e.openBlock(),e.createElementBlock("tbody",{key:1,class:e.normalizeClass(["vue3-easy-data-table__body",{"row-alternation":n.alternating}])},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(fe),(u,B)=>(e.openBlock(),e.createElementBlock(e.Fragment,{key:B},[e.createElementVNode("tr",{class:e.normalizeClass([{"even-row":(B+1)%2===0},typeof n.bodyRowClassName=="string"?n.bodyRowClassName:n.bodyRowClassName(u,B)]),onClick:E=>e.unref($t)(u)},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(ce),(E,_e)=>(e.openBlock(),e.createElementBlock("td",{key:_e,style:e.normalizeStyle(he(E,"td")),class:e.normalizeClass([{shadow:E===e.unref(ge),"can-expand":E==="expand"},typeof n.bodyItemClassName=="string"?n.bodyItemClassName:n.bodyItemClassName(E,_e)]),onClick:ye=>E==="expand"?e.unref(It)(B,u,ye):null},[e.unref(T)[`item-${E}`]?e.renderSlot(I.$slots,`item-${E}`,e.normalizeProps(e.mergeProps({key:0},u)),void 0,!0):E==="expand"?(e.openBlock(),e.createElementBlock("i",{key:1,class:e.normalizeClass(["expand-icon",{expanding:e.unref(me).includes(B)}])},null,2)):E==="checkbox"?(e.openBlock(),e.createBlock(Ee,{key:2,checked:u[E],onChange:ye=>e.unref(Bt)(u)},null,8,["checked","onChange"])):(e.openBlock(),e.createElementBlock(e.Fragment,{key:3},[e.createTextVNode(e.toDisplayString(e.unref(tt)(E,u)),1)],64))],14,it))),128))],10,st),e.unref(re)&&e.unref(me).includes(B)?(e.openBlock(),e.createElementBlock("tr",{key:0,class:e.normalizeClass({"even-row":(B+1)%2===0})},[e.createElementVNode("td",{colspan:e.unref(M).length,class:"expand"},[u.expandLoading?(e.openBlock(),e.createBlock(He,{key:0,class:"expand-loading"})):e.createCommentVNode("",!0),e.renderSlot(I.$slots,"expand",e.normalizeProps(e.guardReactiveProps(u)),void 0,!0)],8,ct)],2)):e.createCommentVNode("",!0)],64))),128))],2)):e.createCommentVNode("",!0)]),e.unref(C)?(e.openBlock(),e.createElementBlock("div",dt,[ut,e.createElementVNode("div",pt,[e.unref(z)?e.renderSlot(I.$slots,"loading",{key:0},void 0,!0):(e.openBlock(),e.createBlock(ze,{key:1}))])])):e.createCommentVNode("",!0),!e.unref(fe).length&&!e.unref(C)?(e.openBlock(),e.createElementBlock("div",ft,e.toDisplayString(n.emptyMessage),1)):e.createCommentVNode("",!0)],2),n.hideFooter?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("div",mt,[n.hideRowsPerPage?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("div",gt,[e.createTextVNode(e.toDisplayString(n.rowsPerPageMessage)+" ",1),e.createVNode(Te,{modelValue:e.unref(A),"onUpdate:modelValue":V[0]||(V[0]=u=>e.isRef(A)?A.value=u:null),"rows-items":e.unref(Pt)},null,8,["modelValue","rows-items"])])),e.createElementVNode("div",ht,e.toDisplayString(`${e.unref(de)}\u2013${e.unref(ue)}`)+" of "+e.toDisplayString(e.unref(W)),1),e.unref(F)?e.renderSlot(I.$slots,"pagination",e.normalizeProps(e.mergeProps({key:1},{isFirstPage:e.unref(ee),isLastPage:e.unref(Z),currentPaginationNumber:e.unref(J),maxPaginationNumber:e.unref(Y),nextPage:e.unref(te),prevPage:e.unref(ne)})),void 0,!0):(e.openBlock(),e.createBlock(Je,{key:2,"is-first-page":e.unref(ee),"is-last-page":e.unref(Z),onClickNextPage:e.unref(te),onClickPrevPage:e.unref(ne)},e.createSlots({_:2},[n.buttonsPagination?{name:"buttonsPagination",fn:e.withCtx(()=>[e.createVNode(Me,{"current-pagination-number":e.unref(J),"max-pagination-number":e.unref(Y),onUpdatePage:e.unref(U)},null,8,["current-pagination-number","max-pagination-number","onUpdatePage"])])}:void 0]),1032,["is-first-page","is-last-page","onClickNextPage","onClickPrevPage"]))]))],2))}}),[["__scopeId","data-v-13c5baed"]]);return typeof window!="undefined"&&window.Vue&&window.Vue.createApp({}).component("Vue3EasyDataTable",le),le});

package.json

@@ -6,3 +6,3 @@ {
   "private": false,
-  "version": "1.3.17",
+  "version": "1.4.0",
   "types": "./types/main.d.ts",
@@ -9,0 +9,0 @@ "license": "MIT",

README.md

@@ -131,6 +131,3 @@ <p align="center">
 
-## ⭐ Stargazers
-[![Stargazers repo roster for @HC200ok/vue3-easy-data-table](https://reporoster.com/stars/dark/notext/HC200ok/vue3-easy-data-table)](https://github.com/HC200ok/vue3-easy-data-table/stargazers)
-
 ## Contribution
 Shout out to the people who made new feature requests and reported issues to make this component better.

types/main.d.ts

@@ -8,37 +8,37 @@ export type SortType = 'asc' | 'desc'
 export type FilterOption = {
-  field: string,
-  comparison: 'between',
-  criteria: [number, number],
+  field: string
+  comparison: 'between'
+  criteria: [number, number]
 } | {
-  field: string,
-  comparison: '=' | '!=',
-  criteria: number | string,
+  field: string
+  comparison: '=' | '!='
+  criteria: number | string
 } | {
-  field: string,
-  comparison: '>' | '>=' | '<' | '<=',
-  criteria: number,
+  field: string
+  comparison: '>' | '>=' | '<' | '<='
+  criteria: number
 } | {
-  field: string,
-  comparison: (value: any, criteria: string) => boolean,
-  criteria: string,
+  field: string
+  comparison: (value: any, criteria: string) => boolean
+  criteria: string
 }
 
 export type Header = {
-  text: string,
-  value: string,
-  sortable?: boolean,
-  fixed?: boolean,
-  width?: number,
+  text: string
+  value: string
+  sortable?: boolean
+  fixed?: boolean
+  width?: number
 }
 
 export type ServerOptions = {
-  page: number,
-  rowsPerPage: number,
-  sortBy?: string,
-  sortType?: SortType,
+  page: number
+  rowsPerPage: number
+  sortBy?: string
+  sortType?: SortType
 }
 
 export type clickRowArgument = Item & {
-  isSelected?: boolean,
-  indexInCurrentPage?: number,
+  isSelected?: boolean
+  indexInCurrentPage?: number
 }
@@ -45,0 +45,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

100671

increased by6.68%

Lines of code

1570

increased by11.74%

Worsened metrics

Number of lines in readme file

133

decreased by-2.21%

No dependency changes