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,