@underverse-ui/underverse 0.2.21 → 0.2.23

package/dist/index.d.cts

@@ -1411,6 +1411,8 @@ interface DataTableProps<T> {
     /** Hiển thị đường kẻ dọc ngăn cách giữa các cột */
     columnDividers?: boolean;
     className?: string;
+    /** Key để lưu pageSize vào localStorage. Nếu không cung cấp, pageSize sẽ không được persist */
+    storageKey?: string;
     labels?: {
         density?: string;
         columns?: string;
@@ -1424,7 +1426,7 @@ interface DataTableProps<T> {
     };
 }
 declare function DataTable<T extends Record<string, any>>({ columns, data, rowKey, loading, total, page, pageSize, pageSizeOptions, onQueryChange, caption, toolbar, enableColumnVisibilityToggle, enableDensityToggle, enableHeaderAlignToggle, striped, // Mặc định bật màu nền sẽn kẽ cho các dòng
-columnDividers, className, labels, }: DataTableProps<T>): react_jsx_runtime.JSX.Element;
+columnDividers, className, storageKey, labels, }: DataTableProps<T>): react_jsx_runtime.JSX.Element;
 
 interface TableProps extends React__default.HTMLAttributes<HTMLTableElement> {
     containerClassName?: string;

package/dist/index.d.ts

@@ -1411,6 +1411,8 @@ interface DataTableProps<T> {
     /** Hiển thị đường kẻ dọc ngăn cách giữa các cột */
     columnDividers?: boolean;
     className?: string;
+    /** Key để lưu pageSize vào localStorage. Nếu không cung cấp, pageSize sẽ không được persist */
+    storageKey?: string;
     labels?: {
         density?: string;
         columns?: string;
@@ -1424,7 +1426,7 @@ interface DataTableProps<T> {
     };
 }
 declare function DataTable<T extends Record<string, any>>({ columns, data, rowKey, loading, total, page, pageSize, pageSizeOptions, onQueryChange, caption, toolbar, enableColumnVisibilityToggle, enableDensityToggle, enableHeaderAlignToggle, striped, // Mặc định bật màu nền sẽn kẽ cho các dòng
-columnDividers, className, labels, }: DataTableProps<T>): react_jsx_runtime.JSX.Element;
+columnDividers, className, storageKey, labels, }: DataTableProps<T>): react_jsx_runtime.JSX.Element;
 
 interface TableProps extends React__default.HTMLAttributes<HTMLTableElement> {
     containerClassName?: string;

package/dist/index.js

@@ -9914,6 +9914,7 @@ function DataTable({
   // Mặc định bật màu nền sẽn kẽ cho các dòng
   columnDividers = false,
   className,
+  storageKey,
   labels
 }) {
   const t = useTranslations7("Common");
@@ -9923,7 +9924,32 @@ function DataTable({
   const [sort, setSort] = React37.useState(null);
   const [density, setDensity] = React37.useState("normal");
   const [curPage, setCurPage] = React37.useState(page);
-  const [curPageSize, setCurPageSize] = React37.useState(pageSize);
+  const hasMounted = React37.useRef(false);
+  const loadedFromStorage = React37.useRef(false);
+  const getInitialPageSize = React37.useCallback(() => {
+    if (typeof window === "undefined" || !storageKey) return pageSize;
+    try {
+      const saved = localStorage.getItem(`datatable_${storageKey}_pageSize`);
+      if (saved) {
+        const parsed = parseInt(saved, 10);
+        if (!isNaN(parsed) && parsed > 0) {
+          loadedFromStorage.current = true;
+          return parsed;
+        }
+      }
+    } catch {
+    }
+    return pageSize;
+  }, [storageKey, pageSize]);
+  const [curPageSize, setCurPageSize] = React37.useState(getInitialPageSize);
+  React37.useEffect(() => {
+    if (typeof window === "undefined" || !storageKey) return;
+    if (!hasMounted.current) return;
+    try {
+      localStorage.setItem(`datatable_${storageKey}_pageSize`, String(curPageSize));
+    } catch {
+    }
+  }, [curPageSize, storageKey]);
   React37.useEffect(() => {
     const newColKeys = columns.filter((c) => c.visible !== false).map((c) => c.key);
     setVisibleCols((prev) => {
@@ -9936,10 +9962,17 @@ function DataTable({
     setCurPage(page);
   }, [page]);
   React37.useEffect(() => {
+    if (storageKey && loadedFromStorage.current) {
+      return;
+    }
     setCurPageSize(pageSize);
-  }, [pageSize]);
+  }, [pageSize, storageKey]);
   React37.useEffect(() => {
     if (!onQueryChange) return;
+    if (!hasMounted.current) {
+      hasMounted.current = true;
+      return;
+    }
     onQueryChange({ filters: debouncedFilters, sort, page: curPage, pageSize: curPageSize });
   }, [debouncedFilters, sort, curPage, curPageSize]);
   const densityRowClass = density === "compact" ? "h-9" : density === "comfortable" ? "h-14" : "h-12";