@underverse-ui/underverse 0.1.26 → 0.1.28

package/dist/index.cjs

@@ -7147,6 +7147,7 @@ function DataTable({
   total = 0,
   page = 1,
   pageSize = 20,
+  pageSizeOptions,
   onQueryChange,
   caption,
   toolbar,
@@ -7165,6 +7166,12 @@ function DataTable({
   const [curPage, setCurPage] = import_react21.default.useState(page);
   const [curPageSize, setCurPageSize] = import_react21.default.useState(pageSize);
   const debouncedFilters = useDebounced(filters, 350);
+  import_react21.default.useEffect(() => {
+    setCurPage(page);
+  }, [page]);
+  import_react21.default.useEffect(() => {
+    setCurPageSize(pageSize);
+  }, [pageSize]);
   import_react21.default.useEffect(() => {
     if (!onQueryChange) return;
     onQueryChange({ filters: debouncedFilters, sort, page: curPage, pageSize: curPageSize });
@@ -7326,6 +7333,12 @@ function DataTable({
     },
     col.key
   )) });
+  const isServerMode = Boolean(onQueryChange);
+  const displayedData = isServerMode ? data : import_react21.default.useMemo(() => {
+    const start = (curPage - 1) * curPageSize;
+    return data.slice(start, start + curPageSize);
+  }, [data, curPage, curPageSize]);
+  const totalItems = isServerMode ? total : data.length;
   return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: cn("space-y-2", className), children: [
     /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "flex items-center justify-between gap-4 mb-1", children: [
       /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "text-sm text-muted-foreground", children: caption }),
@@ -7397,7 +7410,7 @@ function DataTable({
               )
             ] }),
             /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { className: "text-sm", children: "Loading..." })
-          ] }) }) }) : !data || data.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(TableRow, { children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(TableCell, { colSpan: visibleColumns.length, className: "text-center py-6 text-muted-foreground", children: "No data" }) }) : data.map((row, idx) => /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(TableRow, { className: cn(densityRowClass, striped && idx % 2 === 0 && "bg-muted/30"), children: visibleColumns.map((col) => {
+          ] }) }) }) : !displayedData || displayedData.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(TableRow, { children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(TableCell, { colSpan: visibleColumns.length, className: "text-center py-6 text-muted-foreground", children: "No data" }) }) : displayedData.map((row, idx) => /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(TableRow, { className: cn(densityRowClass, striped && idx % 2 === 0 && "bg-muted/30"), children: visibleColumns.map((col) => {
             const value = col.dataIndex ? row[col.dataIndex] : void 0;
             return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
               TableCell,
@@ -7417,16 +7430,21 @@ function DataTable({
         ]
       }
     ) }),
-    total > 0 && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "border-t bg-muted/30 p-4 rounded-b-lg", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+    totalItems > 0 && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "border-t bg-muted/30 p-4 rounded-b-lg", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
       Pagination,
       {
         page: curPage,
-        totalPages: Math.ceil(total / curPageSize),
+        totalPages: Math.ceil(totalItems / curPageSize),
         onChange: (p) => setCurPage(p),
         className: "",
         showInfo: true,
-        totalItems: total,
-        pageSize: curPageSize
+        totalItems,
+        pageSize: curPageSize,
+        pageSizeOptions,
+        onPageSizeChange: (s) => {
+          setCurPage(1);
+          setCurPageSize(s);
+        }
       }
     ) })
   ] });