save amount of entries per page

Author: Pallavikumarimdb

src/app/[orgId]/settings/access/invitations/InvitationsDataTable.tsx

@@ -22,6 +22,7 @@ export function InvitationsDataTable<TData, TValue>({
         <DataTable
             columns={columns}
             data={data}
+            persistPageSize="invitations-table"
             title={t('invite')}
             searchPlaceholder={t('inviteSearch')}
             searchColumn="email"

src/app/[orgId]/settings/access/roles/RolesDataTable.tsx

@@ -24,6 +24,7 @@ export function RolesDataTable<TData, TValue>({
         <DataTable
             columns={columns}
             data={data}
+            persistPageSize="roles-table"
             title={t('roles')}
             searchPlaceholder={t('accessRolesSearch')}
             searchColumn="name"

src/app/[orgId]/settings/access/users/UsersDataTable.tsx

@@ -24,6 +24,7 @@ export function UsersDataTable<TData, TValue>({
         <DataTable
             columns={columns}
             data={data}
+            persistPageSize="users-table"
             title={t('users')}
             searchPlaceholder={t('accessUsersSearch')}
             searchColumn="email"

src/app/[orgId]/settings/api-keys/OrgApiKeysDataTable.tsx

@@ -22,6 +22,7 @@ export function OrgApiKeysDataTable<TData, TValue>({
         <DataTable
             columns={columns}
             data={data}
+            persistPageSize="Org-apikeys-table"
             title={t('apiKeys')}
             searchPlaceholder={t('searchApiKeys')}
             searchColumn="name"

src/app/[orgId]/settings/clients/ClientsDataTable.tsx

@@ -20,6 +20,7 @@ export function ClientsDataTable<TData, TValue>({
         <DataTable
             columns={columns}
             data={data}
+            persistPageSize="clients-table"
             title="Clients"
             searchPlaceholder="Search clients..."
             searchColumn="name"

src/app/[orgId]/settings/domains/DomainsDataTable.tsx

@@ -25,6 +25,7 @@ export function DomainsDataTable<TData, TValue>({
         <DataTable
             columns={columns}
             data={data}
+            persistPageSize="domains-table"
             title={t("domains")}
             searchPlaceholder={t("domainsSearch")}
             searchColumn="baseDomain"

src/app/[orgId]/settings/resources/ResourcesTable.tsx

@@ -99,6 +99,42 @@ type ResourcesTableProps = {
     defaultView?: "proxy" | "internal";
 };
 
+
+const STORAGE_KEYS = {
+    PAGE_SIZE: 'datatable-page-size',
+    getTablePageSize: (tableId?: string) =>
+        tableId ? `datatable-${tableId}-page-size` : STORAGE_KEYS.PAGE_SIZE
+};
+
+const getStoredPageSize = (tableId?: string, defaultSize = 20): number => {
+    if (typeof window === 'undefined') return defaultSize;
+
+    try {
+        const key = STORAGE_KEYS.getTablePageSize(tableId);
+        const stored = localStorage.getItem(key);
+        if (stored) {
+            const parsed = parseInt(stored, 10);
+            if (parsed > 0 && parsed <= 1000) {
+                return parsed;
+            }
+        }
+    } catch (error) {
+        console.warn('Failed to read page size from localStorage:', error);
+    }
+    return defaultSize;
+};
+
+const setStoredPageSize = (pageSize: number, tableId?: string): void => {
+    if (typeof window === 'undefined') return;
+
+    try {
+        const key = STORAGE_KEYS.getTablePageSize(tableId);
+        localStorage.setItem(key, pageSize.toString());
+    } catch (error) {
+        console.warn('Failed to save page size to localStorage:', error);
+    }
+};
+
 export default function SitesTable({
     resources,
     internalResources,
@@ -113,6 +149,13 @@ export default function SitesTable({
 
     const api = createApiClient({ env });
 
+    const [proxyPageSize, setProxyPageSize] = useState<number>(() =>
+        getStoredPageSize('proxy-resources', 20)
+    );
+    const [internalPageSize, setInternalPageSize] = useState<number>(() =>
+        getStoredPageSize('internal-resources', 20)
+    );
+
     const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
     const [selectedResource, setSelectedResource] =
         useState<ResourceRow | null>();
@@ -559,7 +602,7 @@ export default function SitesTable({
         onGlobalFilterChange: setProxyGlobalFilter,
         initialState: {
             pagination: {
-                pageSize: 20,
+                pageSize: proxyPageSize, 
                 pageIndex: 0
             }
         },
@@ -582,7 +625,7 @@ export default function SitesTable({
         onGlobalFilterChange: setInternalGlobalFilter,
         initialState: {
             pagination: {
-                pageSize: 20,
+                pageSize: internalPageSize,
                 pageIndex: 0
             }
         },
@@ -593,6 +636,16 @@ export default function SitesTable({
         }
     });
 
+    const handleProxyPageSizeChange = (newPageSize: number) => {
+        setProxyPageSize(newPageSize);
+        setStoredPageSize(newPageSize, 'proxy-resources');
+    };
+
+    const handleInternalPageSizeChange = (newPageSize: number) => {
+        setInternalPageSize(newPageSize);
+        setStoredPageSize(newPageSize, 'internal-resources');
+    };
+
     return (
         <>
             {selectedResource && (
@@ -760,7 +813,10 @@ export default function SitesTable({
                                     </TableBody>
                                 </Table>
                                 <div className="mt-4">
-                                    <DataTablePagination table={proxyTable} />
+                                    <DataTablePagination
+                                        table={proxyTable}
+                                        onPageSizeChange={handleProxyPageSizeChange}
+                                    />
                                 </div>
                             </TabsContent>
                             <TabsContent value="internal">
@@ -860,6 +916,7 @@ export default function SitesTable({
                                 <div className="mt-4">
                                     <DataTablePagination
                                         table={internalTable}
+                                        onPageSizeChange={handleInternalPageSizeChange}
                                     />
                                 </div>
                             </TabsContent>

src/app/[orgId]/settings/share-links/ShareLinksDataTable.tsx

@@ -24,6 +24,7 @@ export function ShareLinksDataTable<TData, TValue>({
         <DataTable
             columns={columns}
             data={data}
+            persistPageSize="shareLinks-table"
             title={t('shareLinks')}
             searchPlaceholder={t('shareSearch')}
             searchColumn="name"

src/app/[orgId]/settings/sites/SitesDataTable.tsx

@@ -26,6 +26,7 @@ export function SitesDataTable<TData, TValue>({
         <DataTable
             columns={columns}
             data={data}
+            persistPageSize="sites-table"
             title={t('sites')}
             searchPlaceholder={t('searchSitesProgress')}
             searchColumn="name"

src/app/admin/api-keys/ApiKeysDataTable.tsx

@@ -42,11 +42,12 @@ export function ApiKeysDataTable<TData, TValue>({
 }: DataTableProps<TData, TValue>) {
 
     const t = useTranslations();
-    
+
     return (
         <DataTable
             columns={columns}
             data={data}
+            persistPageSize="apiKeys-table"
             title={t('apiKeys')}
             searchPlaceholder={t('searchApiKeys')}
             searchColumn="name"