@underverse-ui/underverse 0.1.26 → 0.1.28

package/dist/index.d.cts

@@ -949,6 +949,7 @@ interface DataTableProps<T> {
     total?: number;
     page?: number;
     pageSize?: number;
+    pageSizeOptions?: number[];
     onQueryChange?: (q: DataTableQuery) => void;
     caption?: React__default.ReactNode;
     toolbar?: React__default.ReactNode;
@@ -964,7 +965,7 @@ interface DataTableProps<T> {
         comfortable?: string;
     };
 }
-declare function DataTable<T extends Record<string, any>>({ columns, data, rowKey, loading, total, page, pageSize, onQueryChange, caption, toolbar, enableColumnVisibilityToggle, enableDensityToggle, striped, // Mặc định bật màu nền sẽn kẽ cho các dòng
+declare function DataTable<T extends Record<string, any>>({ columns, data, rowKey, loading, total, page, pageSize, pageSizeOptions, onQueryChange, caption, toolbar, enableColumnVisibilityToggle, enableDensityToggle, striped, // Mặc định bật màu nền sẽn kẽ cho các dòng
 className, labels, }: DataTableProps<T>): react_jsx_runtime.JSX.Element;
 
 interface TableProps extends React__default.HTMLAttributes<HTMLTableElement> {

package/dist/index.d.ts

@@ -949,6 +949,7 @@ interface DataTableProps<T> {
     total?: number;
     page?: number;
     pageSize?: number;
+    pageSizeOptions?: number[];
     onQueryChange?: (q: DataTableQuery) => void;
     caption?: React__default.ReactNode;
     toolbar?: React__default.ReactNode;
@@ -964,7 +965,7 @@ interface DataTableProps<T> {
         comfortable?: string;
     };
 }
-declare function DataTable<T extends Record<string, any>>({ columns, data, rowKey, loading, total, page, pageSize, onQueryChange, caption, toolbar, enableColumnVisibilityToggle, enableDensityToggle, striped, // Mặc định bật màu nền sẽn kẽ cho các dòng
+declare function DataTable<T extends Record<string, any>>({ columns, data, rowKey, loading, total, page, pageSize, pageSizeOptions, onQueryChange, caption, toolbar, enableColumnVisibilityToggle, enableDensityToggle, striped, // Mặc định bật màu nền sẽn kẽ cho các dòng
 className, labels, }: DataTableProps<T>): react_jsx_runtime.JSX.Element;
 
 interface TableProps extends React__default.HTMLAttributes<HTMLTableElement> {

package/dist/index.js

@@ -7003,6 +7003,7 @@ function DataTable({
   total = 0,
   page = 1,
   pageSize = 20,
+  pageSizeOptions,
   onQueryChange,
   caption,
   toolbar,
@@ -7021,6 +7022,12 @@ function DataTable({
   const [curPage, setCurPage] = React30.useState(page);
   const [curPageSize, setCurPageSize] = React30.useState(pageSize);
   const debouncedFilters = useDebounced(filters, 350);
+  React30.useEffect(() => {
+    setCurPage(page);
+  }, [page]);
+  React30.useEffect(() => {
+    setCurPageSize(pageSize);
+  }, [pageSize]);
   React30.useEffect(() => {
     if (!onQueryChange) return;
     onQueryChange({ filters: debouncedFilters, sort, page: curPage, pageSize: curPageSize });
@@ -7182,6 +7189,12 @@ function DataTable({
     },
     col.key
   )) });
+  const isServerMode = Boolean(onQueryChange);
+  const displayedData = isServerMode ? data : React30.useMemo(() => {
+    const start = (curPage - 1) * curPageSize;
+    return data.slice(start, start + curPageSize);
+  }, [data, curPage, curPageSize]);
+  const totalItems = isServerMode ? total : data.length;
   return /* @__PURE__ */ jsxs33("div", { className: cn("space-y-2", className), children: [
     /* @__PURE__ */ jsxs33("div", { className: "flex items-center justify-between gap-4 mb-1", children: [
       /* @__PURE__ */ jsx39("div", { className: "text-sm text-muted-foreground", children: caption }),
@@ -7253,7 +7266,7 @@ function DataTable({
               )
             ] }),
             /* @__PURE__ */ jsx39("span", { className: "text-sm", children: "Loading..." })
-          ] }) }) }) : !data || data.length === 0 ? /* @__PURE__ */ jsx39(TableRow, { children: /* @__PURE__ */ jsx39(TableCell, { colSpan: visibleColumns.length, className: "text-center py-6 text-muted-foreground", children: "No data" }) }) : data.map((row, idx) => /* @__PURE__ */ jsx39(TableRow, { className: cn(densityRowClass, striped && idx % 2 === 0 && "bg-muted/30"), children: visibleColumns.map((col) => {
+          ] }) }) }) : !displayedData || displayedData.length === 0 ? /* @__PURE__ */ jsx39(TableRow, { children: /* @__PURE__ */ jsx39(TableCell, { colSpan: visibleColumns.length, className: "text-center py-6 text-muted-foreground", children: "No data" }) }) : displayedData.map((row, idx) => /* @__PURE__ */ jsx39(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__ */ jsx39(
               TableCell,
@@ -7273,16 +7286,21 @@ function DataTable({
         ]
       }
     ) }),
-    total > 0 && /* @__PURE__ */ jsx39("div", { className: "border-t bg-muted/30 p-4 rounded-b-lg", children: /* @__PURE__ */ jsx39(
+    totalItems > 0 && /* @__PURE__ */ jsx39("div", { className: "border-t bg-muted/30 p-4 rounded-b-lg", children: /* @__PURE__ */ jsx39(
       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);
+        }
       }
     ) })
   ] });