@underverse-ui/underverse 0.2.21 → 0.2.23

package/dist/index.cjs

@@ -10069,6 +10069,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 = (0, import_next_intl7.useTranslations)("Common");
@@ -10078,7 +10079,32 @@ function DataTable({
   const [sort, setSort] = import_react23.default.useState(null);
   const [density, setDensity] = import_react23.default.useState("normal");
   const [curPage, setCurPage] = import_react23.default.useState(page);
-  const [curPageSize, setCurPageSize] = import_react23.default.useState(pageSize);
+  const hasMounted = import_react23.default.useRef(false);
+  const loadedFromStorage = import_react23.default.useRef(false);
+  const getInitialPageSize = import_react23.default.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] = import_react23.default.useState(getInitialPageSize);
+  import_react23.default.useEffect(() => {
+    if (typeof window === "undefined" || !storageKey) return;
+    if (!hasMounted.current) return;
+    try {
+      localStorage.setItem(`datatable_${storageKey}_pageSize`, String(curPageSize));
+    } catch {
+    }
+  }, [curPageSize, storageKey]);
   import_react23.default.useEffect(() => {
     const newColKeys = columns.filter((c) => c.visible !== false).map((c) => c.key);
     setVisibleCols((prev) => {
@@ -10091,10 +10117,17 @@ function DataTable({
     setCurPage(page);
   }, [page]);
   import_react23.default.useEffect(() => {
+    if (storageKey && loadedFromStorage.current) {
+      return;
+    }
     setCurPageSize(pageSize);
-  }, [pageSize]);
+  }, [pageSize, storageKey]);
   import_react23.default.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";