Save Amount of Entries

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,43 @@ 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 ResourcesTable({
     resources,
     internalResources,
@@ -113,6 +150,13 @@ export default function ResourcesTable({
 
     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 +603,7 @@ export default function ResourcesTable({
         onGlobalFilterChange: setProxyGlobalFilter,
         initialState: {
             pagination: {
-                pageSize: 20,
+                pageSize: proxyPageSize,
                 pageIndex: 0
             }
         },
@@ -582,7 +626,7 @@ export default function ResourcesTable({
         onGlobalFilterChange: setInternalGlobalFilter,
         initialState: {
             pagination: {
-                pageSize: 20,
+                pageSize: proxyPageSize,
                 pageIndex: 0
             }
         },
@@ -593,6 +637,16 @@ export default function ResourcesTable({
         }
     });
 
+    const handleProxyPageSizeChange = (newPageSize: number) => {
+        setProxyPageSize(newPageSize);
+        setStoredPageSize(newPageSize, 'proxy-resources');
+    };
+
+    const handleInternalPageSizeChange = (newPageSize: number) => {
+        setInternalPageSize(newPageSize);
+        setStoredPageSize(newPageSize, 'internal-resources');
+    };
+
     return (
         <>
             {selectedResource && (
@@ -761,7 +815,10 @@ export default function ResourcesTable({
                                     </TableBody>
                                 </Table>
                                 <div className="mt-4">
-                                    <DataTablePagination table={proxyTable} />
+                                    <DataTablePagination
+                                        table={proxyTable}
+                                        onPageSizeChange={handleProxyPageSizeChange}
+                                    />
                                 </div>
                             </TabsContent>
                             <TabsContent value="internal">
@@ -861,6 +918,7 @@ export default function ResourcesTable({
                                 <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

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

src/app/admin/idp/AdminIdpDataTable.tsx

@@ -21,6 +21,7 @@ export function IdpDataTable<TData, TValue>({
         <DataTable
             columns={columns}
             data={data}
+            persistPageSize="idp-table"
             title={t('idp')}
             searchPlaceholder={t('idpSearch')}
             searchColumn="name"

src/app/admin/idp/[idpId]/policies/PolicyDataTable.tsx

@@ -22,6 +22,7 @@ export function PolicyDataTable<TData, TValue>({
         <DataTable
             columns={columns}
             data={data}
+            persistPageSize="orgPolicies-table"
             title={t('orgPolicies')}
             searchPlaceholder={t('orgPoliciesSearch')}
             searchColumn="orgId"

src/app/admin/license/LicenseKeysDataTable.tsx

@@ -136,6 +136,7 @@ export function LicenseKeysDataTable({
         <DataTable
             columns={columns}
             data={licenseKeys}
+            persistPageSize="licenseKeys-table"
             title={t('licenseKeys')}
             searchPlaceholder={t('licenseKeySearch')}
             searchColumn="licenseKey"

src/app/admin/users/AdminUsersDataTable.tsx

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

src/components/DataTablePagination.tsx

@@ -18,28 +18,38 @@ import { useTranslations } from "next-intl";
 
 interface DataTablePaginationProps<TData> {
     table: Table<TData>;
+    onPageSizeChange?: (pageSize: number) => void;
 }
 
 export function DataTablePagination<TData>({
-    table
+    table,
+    onPageSizeChange
 }: DataTablePaginationProps<TData>) {
     const t = useTranslations();
 
+    const handlePageSizeChange = (value: string) => {
+        const newPageSize = Number(value);
+        table.setPageSize(newPageSize);
+        
+        // Call the callback if provided (for persistence)
+        if (onPageSizeChange) {
+            onPageSizeChange(newPageSize);
+        }
+    };
+
     return (
         <div className="flex items-center justify-between text-muted-foreground">
             <div className="flex items-center space-x-2">
                 <Select
                     value={`${table.getState().pagination.pageSize}`}
-                    onValueChange={(value) => {
-                        table.setPageSize(Number(value));
-                    }}
+                    onValueChange={handlePageSizeChange}
                 >
                     <SelectTrigger className="h-8 w-[70px]">
                         <SelectValue
                             placeholder={table.getState().pagination.pageSize}
                         />
                     </SelectTrigger>
-                    <SelectContent side="top">
+                    <SelectContent side="bottom">
                         {[10, 20, 30, 40, 50, 100].map((pageSize) => (
                             <SelectItem key={pageSize} value={`${pageSize}`}>
                                 {pageSize}

src/components/ui/data-table.tsx

@@ -20,7 +20,7 @@ import {
     TableRow
 } from "@/components/ui/table";
 import { Button } from "@app/components/ui/button";
-import { useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { Input } from "@app/components/ui/input";
 import { DataTablePagination } from "@app/components/DataTablePagination";
 import { Plus, Search, RefreshCw } from "lucide-react";
@@ -32,7 +32,42 @@ import {
 } from "@app/components/ui/card";
 import { Tabs, TabsList, TabsTrigger } from "@app/components/ui/tabs";
 import { useTranslations } from "next-intl";
-import { useMemo } from "react";
+
+const STORAGE_KEYS = {
+    PAGE_SIZE: 'datatable-page-size',
+    getTablePageSize: (tableId?: string) => 
+        tableId ? `${tableId}-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);
+            // Validate that it's a reasonable page size
+            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);
+    }
+};
 
 type TabFilter = {
     id: string;
@@ -56,6 +91,8 @@ type DataTableProps<TData, TValue> = {
     };
     tabs?: TabFilter[];
     defaultTab?: string;
+    persistPageSize?: boolean | string;
+    defaultPageSize?: number;
 };
 
 export function DataTable<TData, TValue>({
@@ -70,8 +107,23 @@ export function DataTable<TData, TValue>({
     searchColumn = "name",
     defaultSort,
     tabs,
-    defaultTab
+    defaultTab,
+    persistPageSize = false,
+    defaultPageSize = 20
 }: DataTableProps<TData, TValue>) {
+    const t = useTranslations();
+    
+    // Determine table identifier for storage
+    const tableId = typeof persistPageSize === 'string' ? persistPageSize : undefined;
+    
+    // Initialize page size from storage or default
+    const [pageSize, setPageSize] = useState<number>(() => {
+        if (persistPageSize) {
+            return getStoredPageSize(tableId, defaultPageSize);
+        }
+        return defaultPageSize;
+    });
+    
     const [sorting, setSorting] = useState<SortingState>(
         defaultSort ? [defaultSort] : []
     );
@@ -80,7 +132,6 @@ export function DataTable<TData, TValue>({
     const [activeTab, setActiveTab] = useState<string>(
         defaultTab || tabs?.[0]?.id || ""
     );
-    const t = useTranslations();
 
     // Apply tab filter to data
     const filteredData = useMemo(() => {
@@ -108,7 +159,7 @@ export function DataTable<TData, TValue>({
         onGlobalFilterChange: setGlobalFilter,
         initialState: {
             pagination: {
-                pageSize: 20,
+                pageSize: pageSize,
                 pageIndex: 0
             }
         },
@@ -119,12 +170,35 @@ export function DataTable<TData, TValue>({
         }
     });
 
+    useEffect(() => {
+        const currentPageSize = table.getState().pagination.pageSize;
+        if (currentPageSize !== pageSize) {
+            table.setPageSize(pageSize);
+            
+            // Persist to localStorage if enabled
+            if (persistPageSize) {
+                setStoredPageSize(pageSize, tableId);
+            }
+        }
+    }, [pageSize, table, persistPageSize, tableId]);
+
     const handleTabChange = (value: string) => {
         setActiveTab(value);
         // Reset to first page when changing tabs
         table.setPageIndex(0);
     };
 
+    // Enhanced pagination component that updates our local state
+    const handlePageSizeChange = (newPageSize: number) => {
+        setPageSize(newPageSize);
+        table.setPageSize(newPageSize);
+        
+        // Persist immediately when changed
+        if (persistPageSize) {
+            setStoredPageSize(newPageSize, tableId);
+        }
+    };
+
     return (
         <div className="container mx-auto max-w-12xl">
             <Card>
@@ -235,7 +309,10 @@ export function DataTable<TData, TValue>({
                         </TableBody>
                     </Table>
                     <div className="mt-4">
-                        <DataTablePagination table={table} />
+                        <DataTablePagination 
+                            table={table} 
+                            onPageSizeChange={handlePageSizeChange}
+                        />
                     </div>
                 </CardContent>
             </Card>