v-nuxt-ui 0.1.0

package/dist/runtime/composables/table/useTable.js

@@ -0,0 +1,340 @@
+import { computed, ref, useTemplateRef, nextTick } from "vue";
+import { useTableQuery } from "./useTableQuery.js";
+import { useTablePagination } from "./useTablePagination.js";
+import { useTableData } from "./useTableData.js";
+import { useTableRowSelection } from "./useTableRowSelection.js";
+import { useTableColumns } from "./useTableColumns.js";
+import { useTableRowActions } from "./useTableRowActions.js";
+import { useTableOpr } from "./useTableOpr.js";
+export function useTable(props) {
+  const {
+    // table-level props
+    name,
+    disableCreation,
+    disableRefresh,
+    disableBatchDeletion,
+    disableSettings,
+    disableFetchOnMounted,
+    useApiGroup,
+    apiListFn,
+    fetchAll,
+    onEditRowFromModal,
+    exportExcel,
+    // header-level props
+    extraButtons,
+    onNew,
+    // where query
+    disableWhereQuery,
+    extraWhereQueryOptions,
+    extraWhereQueryInitValues,
+    // order query
+    disableOrderQuery,
+    extraOrderQueryOptions,
+    // column-level props
+    bizColumns,
+    extraRowActions,
+    treeifyColName,
+    commonColumnProps,
+    // row-level props
+    rowKey = "id",
+    disableRowActions,
+    disableRowUpdate,
+    disableRowCopy,
+    disableRowDeletion,
+    disableRowSelection,
+    expandable,
+    rowSpanColumns,
+    customRowCopyFn
+  } = props;
+  const queryComposable = useTableQuery({
+    name,
+    bizColumns,
+    extraWhereQueryOptions,
+    extraWhereQueryInitValues,
+    extraOrderQueryOptions
+  });
+  const {
+    whereQueryOptions,
+    whereQueryInitValues,
+    orderQueryOptions,
+    orderQueryInitValues,
+    initStorageColumns,
+    localStgSettings,
+    whereQuery,
+    whereQueryOpen,
+    orderQuery,
+    isWhereQueryValueEmpty,
+    pruneWhereQuery
+  } = queryComposable;
+  const paginationComposable = useTablePagination(localStgSettings);
+  const { pagination, pageSizeDropdownMenuItems } = paginationComposable;
+  const dataComposable = useTableData({
+    name,
+    rowKey,
+    apiListFn,
+    useApiGroup,
+    fetchAll,
+    treeifyColName,
+    disableFetchOnMounted,
+    pagination,
+    pruneWhereQuery,
+    whereQuery,
+    orderQuery,
+    clearRowSelection: () => rowSelectionComposable.clearRowSelection()
+  });
+  const {
+    data,
+    treeifyData,
+    stats,
+    total,
+    createRow,
+    updateRow,
+    deleteRow,
+    fetching,
+    fetchList,
+    debouncedFetchList
+  } = dataComposable;
+  const rowSelectionComposable = useTableRowSelection(data, rowKey);
+  const { rowSelection, selectedIds, clearRowSelection: _clearRowSelection } = rowSelectionComposable;
+  const whereQueryRef = useTemplateRef("proTableQueryWhere");
+  const onFilterClick = (field) => {
+    whereQueryOpen.value = true;
+    const currentItems = whereQuery.value?.items ?? [];
+    const existingItem = currentItems.find((item) => item.field === field);
+    if (!existingItem) {
+      const col = bizColumns.find((c) => c["accessorKey"] === field);
+      if (col?.filterOption) {
+        whereQuery.value = {
+          ...whereQuery.value,
+          items: [...currentItems, {
+            field,
+            opr: col.filterOption.defaultOpr ?? useTableOpr().getDefaultOprByType(col.filterOption.type),
+            value: null,
+            custom: col.filterOption.custom
+          }]
+        };
+      }
+    }
+    const tryFocus = (retries) => {
+      nextTick(() => {
+        const focused = whereQueryRef.value?.focusField(field);
+        if (!focused && retries > 0) {
+          setTimeout(() => tryFocus(retries - 1), 50);
+        }
+      });
+    };
+    tryFocus(3);
+  };
+  const columnsComposable = useTableColumns({
+    bizColumns,
+    commonColumnProps,
+    localStgSettings,
+    initStorageColumns,
+    orderQuery,
+    orderQueryInitValues,
+    onUpdateOrderQuery: (query) => orderQuery.value = query,
+    onFilterClick,
+    debouncedFetchList,
+    fetching,
+    treeifyColName,
+    disableRowSelection,
+    expandable
+  });
+  const {
+    selectionColumn,
+    expandColumn,
+    clonedBizColumns,
+    columnsWithTreeifyExpander,
+    columnPinning
+  } = columnsComposable;
+  const rowActionsComposable = useTableRowActions({
+    rowKey,
+    disableRowActions,
+    disableRowUpdate,
+    disableRowCopy,
+    disableRowDeletion,
+    onEditRowFromModal,
+    extraRowActions,
+    useApiGroup,
+    customRowCopyFn,
+    fetchList
+  });
+  const { getRowActions, generateActionColumn } = rowActionsComposable;
+  const columns = computed(() => {
+    const newCols = [];
+    if (!disableRowSelection) {
+      newCols.push(selectionColumn);
+    }
+    if (expandable) {
+      newCols.push(expandColumn);
+    }
+    newCols.push(...columnsWithTreeifyExpander.value);
+    if (rowSpanColumns && rowSpanColumns.length > 0 && data.value.length > 0) {
+      const rowSpanIdxObj = {};
+      rowSpanColumns.forEach((colName, colIdx) => {
+        let prevValue = void 0;
+        let prevStartIdx = 0;
+        let prevSpan = 1;
+        let prevMaxRowSpan = 1;
+        for (let rowIdx = 0; rowIdx < data.value.length; rowIdx++) {
+          const row = data.value[rowIdx];
+          const value = row[colName];
+          if (colIdx === 0) {
+            if (rowIdx === 0 || value !== prevValue) {
+              prevValue = value;
+              prevStartIdx = rowIdx;
+              prevSpan = 1;
+            } else {
+              prevSpan++;
+            }
+            if (!rowSpanIdxObj[colName]) rowSpanIdxObj[colName] = [];
+            rowSpanIdxObj[colName][prevStartIdx] = prevSpan;
+            if (rowIdx > prevStartIdx) rowSpanIdxObj[colName][rowIdx] = 0;
+          } else {
+            const prevColName = rowSpanColumns[colIdx - 1];
+            let groupStart = rowIdx;
+            while (groupStart >= 0 && row[prevColName] === data.value[groupStart][prevColName]) {
+              groupStart--;
+            }
+            groupStart++;
+            let maxRowspan = 0;
+            for (let i = groupStart; i <= rowIdx; i++) {
+              maxRowspan = Math.max(maxRowspan, rowSpanIdxObj[prevColName][i] ?? 1);
+            }
+            if (rowIdx === 0 || value !== prevValue || prevSpan >= prevMaxRowSpan) {
+              prevValue = value;
+              prevStartIdx = rowIdx;
+              prevSpan = 1;
+              prevMaxRowSpan = maxRowspan;
+            } else {
+              prevSpan++;
+            }
+            if (!rowSpanIdxObj[colName]) rowSpanIdxObj[colName] = [];
+            rowSpanIdxObj[colName][prevStartIdx] = Math.min(prevSpan, maxRowspan);
+            if (rowIdx > prevStartIdx) rowSpanIdxObj[colName][rowIdx] = 0;
+          }
+        }
+      });
+      newCols.forEach((col) => {
+        if (rowSpanColumns.includes(col["accessorKey"])) {
+          col.meta = col.meta || {};
+          col.meta.class = col.meta.class || {};
+          col.meta.rowspan = col.meta.rowspan || {};
+          col.meta.class.td = (cell) => {
+            const rowIdx = cell.row.index;
+            const rowspan = rowSpanIdxObj[col["accessorKey"]]?.[rowIdx] ?? 1;
+            return rowspan === 0 ? "hidden" : "";
+          };
+          col.meta.rowspan.td = (cell) => {
+            const rowIdx = cell.row.index;
+            const rowspan = rowSpanIdxObj[col["accessorKey"]]?.[rowIdx] ?? 1;
+            return rowspan === 0 ? "" : rowspan.toString();
+          };
+        }
+      });
+    }
+    if (!disableRowActions) {
+      newCols.push(generateActionColumn());
+    }
+    return newCols;
+  });
+  const tblContextMenuItems = ref([]);
+  function onContextmenu(_e, row) {
+    tblContextMenuItems.value = getRowActions(row);
+  }
+  const tblProps = computed(() => ({
+    data: treeifyColName ? treeifyData.value : data.value,
+    columns: columns.value,
+    loading: fetching.value,
+    sticky: true,
+    getSubRows: (row) => row["children"],
+    expanded: treeifyColName ? true : void 0,
+    columnPinning: columnPinning.value,
+    onContextmenu
+  }));
+  const tblWhereQueryProps = computed(() => ({
+    whereOptions: whereQueryOptions.value,
+    defaultWhereQuery: whereQueryInitValues.value,
+    whereQuery: whereQuery.value,
+    onUpdateWhereQuery: (query) => whereQuery.value = query,
+    whereQueryOpen: whereQueryOpen.value,
+    onUpdateWhereQueryOpen: (open) => whereQueryOpen.value = open,
+    isWhereQueryValueEmpty: isWhereQueryValueEmpty.value,
+    fetching: fetching.value,
+    triggerFetching: fetchList,
+    bizColumns
+  }));
+  const tblOrderQueryProps = computed(() => ({
+    orderOptions: orderQueryOptions.value,
+    defaultOrderQuery: orderQueryInitValues.value,
+    orderQuery: orderQuery.value,
+    onUpdateOrderQuery: (query) => orderQuery.value = query,
+    fetching: fetching.value,
+    triggerFetching: debouncedFetchList,
+    bizColumns
+  }));
+  const tblHeaderProps = computed(() => ({
+    name,
+    fetching: fetching.value,
+    rawBizColumns: bizColumns,
+    onUpdateBizColumns: (columns2) => {
+      clonedBizColumns.value = columns2;
+    },
+    initStorageColumns: initStorageColumns.value,
+    onNew,
+    apiGroup: useApiGroup,
+    fetchList,
+    onEditRowFromModal,
+    selectedIds: selectedIds.value,
+    disableCreation,
+    disableWhereQuery,
+    whereQueryProps: tblWhereQueryProps.value,
+    disableOrderQuery,
+    orderQueryProps: tblOrderQueryProps.value,
+    disableBatchDeletion,
+    disableRefresh,
+    disableSettings,
+    exportExcel,
+    extraWhereQueryInitValues,
+    extraButtons
+  }));
+  const tblPaginationProps = computed(() => ({
+    data: data.value,
+    selectedIds: selectedIds.value,
+    pageNum: pagination.value.pageNum ?? 1,
+    pageSize: pagination.value.pageSize ?? 10,
+    total: total.value ?? 0,
+    onUpdatePage: (pageNum) => pagination.value.pageNum = pageNum,
+    hidePagination: fetchAll,
+    fetching: fetching.value,
+    pageSizeDropdownMenuItems: pageSizeDropdownMenuItems.value
+  }));
+  return {
+    // data
+    data,
+    createRow,
+    updateRow,
+    deleteRow,
+    stats,
+    // row selection
+    rowSelection,
+    onUpdateRowSelection: (newRowSelection) => rowSelection.value = newRowSelection,
+    selectedIds,
+    // crud
+    fetching,
+    fetchList,
+    debouncedFetchList,
+    // where query
+    whereQueryOpen: whereQueryOpen.value,
+    onUpdateWhereQueryOpen: (open) => whereQueryOpen.value = open,
+    // columns
+    columns,
+    // props
+    tblProps,
+    tblWhereQueryProps,
+    tblHeaderProps,
+    tblPaginationProps,
+    // others
+    tblContextMenuItems
+  };
+}

package/dist/runtime/composables/table/useTableColumns.d.ts

@@ -0,0 +1,30 @@
+import { type Ref, type ComputedRef } from 'vue';
+import type { ColumnPinningState } from '@tanstack/table-core';
+import type { VColumn, OrderQuery } from '#v/types';
+interface UseTableColumnsReturn<T> {
+    selectionColumn: VColumn<T>;
+    expandColumn: VColumn<T>;
+    clonedBizColumns: Ref<VColumn<T>[]>;
+    columnsWithCommonProps: Ref<VColumn<T>[]>;
+    sortedColumns: ComputedRef<VColumn<T>[]>;
+    columnsWithFilterOptions: ComputedRef<VColumn<T>[]>;
+    columnsWithSortableHeader: ComputedRef<VColumn<T>[]>;
+    columnsWithTreeifyExpander: ComputedRef<VColumn<T>[]>;
+    columnPinning: ComputedRef<ColumnPinningState>;
+}
+export declare function useTableColumns<T>(props: {
+    bizColumns: VColumn<T>[];
+    commonColumnProps?: any;
+    localStgSettings: Ref<LocalStorage.TableSettings<T>>;
+    initStorageColumns: ComputedRef<LocalStorage.Column[]>;
+    orderQuery: ComputedRef<OrderQuery<T>>;
+    orderQueryInitValues: ComputedRef<OrderQuery<T>>;
+    onUpdateOrderQuery: (query: OrderQuery<T>) => void;
+    onFilterClick: (field: string) => void;
+    debouncedFetchList: () => void;
+    fetching: Ref<boolean>;
+    treeifyColName?: keyof T;
+    disableRowSelection?: boolean;
+    expandable?: boolean;
+}): UseTableColumnsReturn<T>;
+export {};

package/dist/runtime/composables/table/useTableColumns.js

@@ -0,0 +1,214 @@
+import { computed, ref, h } from "vue";
+import TableColumnActionHeader from "#v/components/table/column/ActionHeader.vue";
+import UBadge from "@nuxt/ui/components/Badge.vue";
+import UCheckbox from "@nuxt/ui/components/Checkbox.vue";
+import UIcon from "@nuxt/ui/components/Icon.vue";
+import { defu } from "defu";
+import { cloneJson } from "#v/utils";
+export function useTableColumns(props) {
+  const {
+    bizColumns,
+    commonColumnProps = { meta: { class: { td: "min-w-8" } } },
+    localStgSettings,
+    initStorageColumns,
+    orderQuery,
+    onUpdateOrderQuery,
+    onFilterClick,
+    debouncedFetchList,
+    fetching,
+    treeifyColName,
+    disableRowSelection,
+    expandable
+  } = props;
+  const selectionColumn = {
+    id: "select",
+    header: ({ table }) => h(UCheckbox, {
+      "modelValue": table.getIsSomePageRowsSelected() ? "indeterminate" : table.getIsAllPageRowsSelected(),
+      "onUpdate:modelValue": (value) => table.toggleAllPageRowsSelected(Boolean(value)),
+      "ariaLabel": "\u9009\u62E9\u6240\u6709\u884C"
+    }),
+    cell: ({ row }) => h(UCheckbox, {
+      "modelValue": row.getIsSelected() ? true : row.getIsSomeSelected() ? "indeterminate" : false,
+      "onUpdate:modelValue": (value) => row.toggleSelected(Boolean(value)),
+      "ariaLabel": "\u9009\u62E9\u884C"
+    }),
+    meta: {
+      class: {
+        th: "w-12 min-w-12 px-4",
+        // 无数据的时候也有宽度
+        td: "w-12 min-w-12"
+      }
+    },
+    size: 48
+  };
+  const expandColumn = {
+    id: "expand",
+    cell: ({ row }) => h("div", { class: "flex" }, [
+      h(UIcon, {
+        "name": "i-lucide-chevron-left",
+        "aria-label": "Expand",
+        "role": "expand-col",
+        "class": `${row.getIsExpanded() ? "-rotate-90" : ""} duration-200 cursor-pointer size-4 text-dimmed`,
+        "onClick": () => row.toggleExpanded()
+      })
+    ]),
+    meta: {
+      class: {
+        td: "w-12 min-w-12"
+      }
+    },
+    size: 48
+  };
+  const clonedBizColumns = ref(bizColumns);
+  const columnsWithCommonProps = ref(
+    clonedBizColumns.value.map((col) => defu(col, cloneJson(commonColumnProps)))
+  );
+  const sortedColumns = computed(() => {
+    const sortedKeys = (localStgSettings.value.columns ?? initStorageColumns.value).filter((c) => c.checked).map((c) => c.accessorKey);
+    return sortedKeys.map((key) => columnsWithCommonProps.value.find((col) => col["accessorKey"] === key)).filter(Boolean);
+  });
+  const columnsWithFilterOptions = computed(() => {
+    return sortedColumns.value.map((col) => {
+      if (!col.filterOption) {
+        return col;
+      }
+      switch (col.filterOption.type) {
+        case "select":
+          if (col.cell) return col;
+          return {
+            ...col,
+            cell: ({ cell }) => {
+              const item = col.filterOption?.["items"].find((item2) => item2.value === cell.getValue());
+              return item ? h(UBadge, {
+                color: item?.color ?? "neutral",
+                variant: col.filterOption?.["variant"] ?? "outline",
+                icon: item?.icon
+              }, () => item?.label ?? "\u672A\u77E5\u503C") : "";
+            }
+          };
+        default:
+          return col;
+      }
+    });
+  });
+  const columnsWithSortableHeader = computed(() => {
+    return columnsWithFilterOptions.value.map((col) => ({
+      ...col,
+      header: ({ column }) => {
+        const field = col["accessorKey"];
+        const orderQueryIndex = orderQuery.value.findIndex((item) => item.field === field);
+        const orderQueryItem = orderQueryIndex >= 0 ? orderQuery.value[orderQueryIndex] : void 0;
+        const orderIndex = orderQuery.value.length > 1 && orderQueryIndex >= 0 ? orderQueryIndex + 1 : void 0;
+        const onUpdateOrderOpr = (nextOrder) => {
+          if (nextOrder !== null) {
+            const newQuery = [...orderQuery.value];
+            if (orderQueryIndex >= 0) {
+              newQuery[orderQueryIndex] = { field, order: nextOrder };
+            } else {
+              newQuery.push({ field, order: nextOrder });
+            }
+            onUpdateOrderQuery(newQuery);
+          } else {
+            const newOrderQuery = [...orderQuery.value];
+            newOrderQuery.splice(orderQueryIndex, 1);
+            onUpdateOrderQuery(newOrderQuery);
+          }
+        };
+        const accessorKey = col["accessorKey"];
+        const onUpdatePinned = (position) => {
+          const columns = [...localStgSettings.value.columns ?? initStorageColumns.value];
+          const idx = columns.findIndex((c) => c.accessorKey === accessorKey);
+          if (idx >= 0) {
+            columns[idx] = { ...columns[idx], fixed: position };
+            localStgSettings.value = { ...localStgSettings.value, columns };
+          }
+        };
+        return h(TableColumnActionHeader, {
+          label: col.header,
+          accessorKey,
+          fetchList: debouncedFetchList,
+          disabled: fetching.value,
+          enableOrder: col.sortOption !== void 0,
+          isOrdered: Boolean(orderQueryItem),
+          orderOpr: orderQueryItem?.order,
+          orderIndex,
+          onUpdateOrderOpr,
+          isPinned: column.getIsPinned(),
+          onUpdatePinned,
+          enableFilter: col.filterOption !== void 0,
+          onFilterClick,
+          onHideColumn: (key) => {
+            const columns = [...localStgSettings.value.columns ?? initStorageColumns.value];
+            const idx = columns.findIndex((c) => c.accessorKey === key);
+            if (idx >= 0) {
+              columns[idx] = { ...columns[idx], checked: false };
+              localStgSettings.value = { ...localStgSettings.value, columns };
+            }
+          }
+        });
+      }
+    }));
+  });
+  const columnsWithTreeifyExpander = computed(() => {
+    if (!treeifyColName || columnsWithSortableHeader.value.length === 0) return columnsWithSortableHeader.value;
+    const treeifyCol = {
+      ...columnsWithSortableHeader.value[0],
+      cell: (cellProps) => {
+        const originalCellContent = (() => {
+          const originalCell = columnsWithSortableHeader.value[0]?.cell;
+          if (typeof originalCell === "function") {
+            return originalCell(cellProps);
+          } else if (originalCell) {
+            return originalCell;
+          }
+          return cellProps.getValue();
+        })();
+        return h(
+          "div",
+          {
+            style: {
+              paddingLeft: `${cellProps.row.depth}rem`
+            },
+            class: "flex items-center gap-2"
+          },
+          [
+            h(UIcon, {
+              name: cellProps.row.getIsExpanded() && cellProps.row.getCanExpand() ? "i-lucide-chevron-down" : "i-lucide-chevron-right",
+              onClick: cellProps.row.getToggleExpandedHandler(),
+              class: `cursor-pointer ${!cellProps.row.getCanExpand() && "opacity-0"}`
+            }),
+            originalCellContent
+          ]
+        );
+      }
+    };
+    return [treeifyCol, ...columnsWithSortableHeader.value.slice(1)];
+  });
+  const columnPinning = computed(() => {
+    const leftPinnedKeys = [];
+    if (!disableRowSelection) {
+      leftPinnedKeys.push("select");
+    }
+    if (expandable) {
+      leftPinnedKeys.push("expand");
+    }
+    leftPinnedKeys.push(...localStgSettings.value.columns?.filter((c) => c.fixed === "left" && c.checked).map((c) => c.accessorKey) ?? []);
+    const rightPinnedKeys = localStgSettings.value.columns?.filter((c) => c.fixed === "right" && c.checked).map((c) => c.accessorKey) ?? [];
+    rightPinnedKeys.push("actions");
+    return {
+      left: leftPinnedKeys,
+      right: rightPinnedKeys
+    };
+  });
+  return {
+    selectionColumn,
+    expandColumn,
+    clonedBizColumns,
+    columnsWithCommonProps,
+    sortedColumns,
+    columnsWithFilterOptions,
+    columnsWithSortableHeader,
+    columnsWithTreeifyExpander,
+    columnPinning
+  };
+}

package/dist/runtime/composables/table/useTableData.d.ts

@@ -0,0 +1,29 @@
+import { type Ref, type ComputedRef } from 'vue';
+import type { StatsItem, Pagination, WhereQuery, OrderQuery } from '#v/types';
+export declare function useTableData<T>(props: {
+    name: string;
+    rowKey: keyof T;
+    apiListFn?: (...args: any[]) => any;
+    useApiGroup?: (...args: any[]) => any;
+    fetchAll?: boolean;
+    treeifyColName?: keyof T;
+    disableFetchOnMounted?: boolean;
+    pagination: Ref<Pagination>;
+    pruneWhereQuery: (query: WhereQuery<T> | undefined) => WhereQuery<T> | undefined;
+    whereQuery: ComputedRef<WhereQuery<T> | undefined>;
+    orderQuery: ComputedRef<OrderQuery<T>>;
+    clearRowSelection: () => void;
+}): {
+    data: Ref<T[], T[]>;
+    treeifyData: ComputedRef<(T & {
+        children: T[];
+    })[]>;
+    stats: Ref<StatsItem[][], StatsItem[][]>;
+    total: Ref<number, number>;
+    createRow: (model: T) => number;
+    updateRow: (model: T) => void;
+    deleteRow: (model: T) => void;
+    fetching: Ref<boolean, boolean>;
+    fetchList: (fromStart?: boolean) => Promise<void>;
+    debouncedFetchList: import("@vueuse/core").UseDebounceFnReturn<(fromStart?: boolean) => Promise<void>>;
+};

package/dist/runtime/composables/table/useTableData.js

@@ -0,0 +1,92 @@
+import { ref, computed, watch, onMounted } from "vue";
+import { useDebounceFn } from "@vueuse/core";
+import { useFetching } from "../useBoolean.js";
+import { treeifyModels } from "#v/utils";
+const defaultPageSize = 10;
+export function useTableData(props) {
+  const {
+    name,
+    rowKey,
+    apiListFn,
+    useApiGroup,
+    fetchAll,
+    treeifyColName,
+    disableFetchOnMounted,
+    pagination,
+    pruneWhereQuery,
+    whereQuery,
+    orderQuery,
+    clearRowSelection
+  } = props;
+  const apiGroup = useApiGroup?.();
+  const data = ref([]);
+  const stats = ref([]);
+  const treeifyData = computed(() => {
+    if (!treeifyColName) return [];
+    return treeifyModels(data.value, rowKey, treeifyColName, 0);
+  });
+  const createRow = (model) => data.value.unshift(model);
+  const updateRow = (model) => {
+    const index = data.value.findIndex((item) => item[rowKey] === model[rowKey]);
+    if (index !== -1) {
+      data.value[index] = model;
+    }
+  };
+  const deleteRow = (model) => {
+    const index = data.value.findIndex((item) => item[rowKey] === model[rowKey]);
+    if (index !== -1) {
+      data.value.splice(index, 1);
+    }
+  };
+  const { fetching, startFetching, endFetching } = useFetching();
+  const total = ref(0);
+  async function fetchList(fromStart = false) {
+    if (!apiListFn && !apiGroup?.countAndList) {
+      console.warn("No apiListFn or apiGroup.countAndList provided for table:", name);
+      return;
+    }
+    try {
+      startFetching();
+      const { data: fetchedData } = await (apiListFn ?? apiGroup?.countAndList)({
+        pagination: {
+          pageNum: fromStart ? 1 : pagination.value.pageNum ?? 1,
+          pageSize: fetchAll ? 0 : pagination.value.pageSize ?? defaultPageSize
+        },
+        whereQuery: pruneWhereQuery(whereQuery.value),
+        orderQuery: orderQuery.value
+      });
+      if (fetchedData.value?.data) {
+        data.value = fetchedData.value.data.list;
+        total.value = fetchedData.value.data.total;
+        pagination.value.pageNum = fetchedData.value.data.pageNum;
+        pagination.value.pageSize = fetchedData.value.data.pageSize;
+        stats.value = fetchedData.value.data.stats || [];
+        clearRowSelection();
+      }
+    } finally {
+      endFetching();
+    }
+  }
+  const debouncedFetchList = useDebounceFn(fetchList, 512);
+  watch(
+    () => [pagination.value.pageNum, pagination.value.pageSize],
+    async () => await fetchList()
+  );
+  onMounted(async () => {
+    if (!disableFetchOnMounted) {
+      await fetchList();
+    }
+  });
+  return {
+    data,
+    treeifyData,
+    stats,
+    total,
+    createRow,
+    updateRow,
+    deleteRow,
+    fetching,
+    fetchList,
+    debouncedFetchList
+  };
+}