feat: Saving user's page size choices #171

web/src/features/accounts/components/data-table-pagination.tsx

@@ -71,6 +71,7 @@ export function DataTablePagination<TData>({
             <Select
               value={`${table.getState().pagination.pageSize}`}
               onValueChange={(value) => {
+                localStorage.setItem('bichon_accounts_page_size', value);
                 table.setPageSize(Number(value))
               }}
             >
@@ -78,7 +79,7 @@ export function DataTablePagination<TData>({
                 <SelectValue placeholder={table.getState().pagination.pageSize} />
               </SelectTrigger>
               <SelectContent side='top'>
-                {[10, 20, 30, 40, 50].map((pageSize) => (
+                {[10, 20, 30, 40, 50, 100, 150].map((pageSize) => (
                   <SelectItem key={pageSize} value={`${pageSize}`}>
                     {pageSize}
                   </SelectItem>

web/src/features/accounts/components/table.tsx

@@ -75,6 +75,12 @@ export function AccountTable({ columns, data }: DataTableProps) {
       rowSelection,
       columnFilters,
     },
+    initialState: {
+      pagination: {
+        pageIndex: 0,
+        pageSize: Number(localStorage.getItem('bichon_accounts_page_size')) || 10
+      }
+    },
     enableRowSelection: true,
     onRowSelectionChange: setRowSelection,
     onSortingChange: setSorting,

web/src/features/oauth2/components/data-table-pagination.tsx

@@ -71,6 +71,7 @@ export function DataTablePagination<TData>({
             <Select
               value={`${table.getState().pagination.pageSize}`}
               onValueChange={(value) => {
+                localStorage.setItem('bichon_oauth2_page_size', value);
                 table.setPageSize(Number(value))
               }}
             >

web/src/features/oauth2/components/oauth2-table.tsx

@@ -74,6 +74,12 @@ export function Oauth2Table({ columns, data }: DataTableProps) {
       rowSelection,
       columnFilters,
     },
+    initialState: {
+      pagination: {
+        pageIndex: 0,
+        pageSize: Number(localStorage.getItem('bichon_oauth2_page_size')) || 10
+      }
+    },
     enableRowSelection: true,
     onRowSelectionChange: setRowSelection,
     onSortingChange: setSorting,

web/src/features/search/index.tsx

@@ -51,7 +51,7 @@ export default function Search() {
     page,
     pageSize,
     setPage,
-    setPageSize,
+    setSearchPageSize,
     setSortBy,
     setSortOrder,
     filter,
@@ -60,7 +60,7 @@ export default function Search() {
 
   const handleSetPageSize = (pageSize: number) => {
     setPage(1);
-    setPageSize(pageSize)
+    setSearchPageSize(pageSize)
   }
 
   const handleTagToggle = (tag: string) => {

web/src/features/settings/proxy/components/data-table-pagination.tsx

@@ -71,6 +71,7 @@ export function DataTablePagination<TData>({
             <Select
               value={`${table.getState().pagination.pageSize}`}
               onValueChange={(value) => {
+                localStorage.setItem('bichon_proxy_page_size', value);
                 table.setPageSize(Number(value))
               }}
             >

web/src/features/settings/proxy/components/table.tsx

@@ -76,6 +76,12 @@ export function ProxyTable({ columns, data }: DataTableProps) {
       rowSelection,
       columnFilters,
     },
+    initialState: {
+      pagination: {
+        pageIndex: 0,
+        pageSize: Number(localStorage.getItem('bichon_proxy_page_size')) || 10
+      }
+    },
     enableRowSelection: true,
     onRowSelectionChange: setRowSelection,
     onSortingChange: setSorting,

web/src/features/users/api-tokens/components/data-table-pagination.tsx

@@ -72,6 +72,7 @@ export function DataTablePagination<TData>({
             <Select
               value={`${table.getState().pagination.pageSize}`}
               onValueChange={(value) => {
+                localStorage.setItem('bichon_apitoken_page_size', value);
                 table.setPageSize(Number(value))
               }}
             >

web/src/features/users/api-tokens/components/table.tsx

@@ -75,6 +75,12 @@ export function ApiTokensTable({ columns, data }: DataTableProps) {
       rowSelection,
       columnFilters,
     },
+    initialState: {
+      pagination: {
+        pageIndex: 0,
+        pageSize: Number(localStorage.getItem('bichon_apitoken_page_size')) || 10
+      }
+    },
     enableRowSelection: true,
     onRowSelectionChange: setRowSelection,
     onSortingChange: setSorting,

web/src/features/users/roles/components/data-table-pagination.tsx

@@ -71,6 +71,7 @@ export function DataTablePagination<TData>({
             <Select
               value={`${table.getState().pagination.pageSize}`}
               onValueChange={(value) => {
+                localStorage.setItem('bichon_roles_page_size', value);
                 table.setPageSize(Number(value))
               }}
             >
@@ -78,7 +79,7 @@ export function DataTablePagination<TData>({
                 <SelectValue placeholder={table.getState().pagination.pageSize} />
               </SelectTrigger>
               <SelectContent side='top'>
-                {[10, 20, 30, 40, 50].map((pageSize) => (
+                {[10, 20, 30, 40, 50, 100].map((pageSize) => (
                   <SelectItem key={pageSize} value={`${pageSize}`}>
                     {pageSize}
                   </SelectItem>

web/src/features/users/roles/components/table.tsx

@@ -75,6 +75,12 @@ export function RolesTable({ columns, data }: DataTableProps) {
       rowSelection,
       columnFilters,
     },
+    initialState: {
+      pagination: {
+        pageIndex: 0,
+        pageSize: Number(localStorage.getItem('bichon_roles_page_size')) || 10
+      }
+    },
     enableRowSelection: true,
     onRowSelectionChange: setRowSelection,
     onSortingChange: setSorting,

web/src/features/users/users/components/data-table-pagination.tsx

@@ -69,6 +69,7 @@ export function DataTablePagination<TData>({
             <Select
               value={`${table.getState().pagination.pageSize}`}
               onValueChange={(value) => {
+                localStorage.setItem('bichon_users_page_size', value);
                 table.setPageSize(Number(value))
               }}
             >
@@ -76,7 +77,7 @@ export function DataTablePagination<TData>({
                 <SelectValue placeholder={table.getState().pagination.pageSize} />
               </SelectTrigger>
               <SelectContent side='top'>
-                {[10, 20, 30, 40, 50].map((pageSize) => (
+                {[10, 20, 30, 40, 50, 100].map((pageSize) => (
                   <SelectItem key={pageSize} value={`${pageSize}`}>
                     {pageSize}
                   </SelectItem>

web/src/features/users/users/components/table.tsx

@@ -75,6 +75,12 @@ export function UsersTable({ columns, data }: DataTableProps) {
       rowSelection,
       columnFilters,
     },
+    initialState: {
+      pagination: {
+        pageIndex: 0,
+        pageSize: Number(localStorage.getItem('bichon_users_page_size')) || 10
+      }
+    },
     enableRowSelection: true,
     onRowSelectionChange: setRowSelection,
     onSortingChange: setSorting,