Allow disabling pagination

Tribler · Dec 16, 2024 · e167d46 · e167d46
1 parent f11cc7c
commit e167d46
Showing 1 changed file with 18 additions and 8 deletions.
diff --git a/src/tribler/ui/src/components/ui/simple-table.tsx b/src/tribler/ui/src/components/ui/simple-table.tsx
@@ -263,21 +263,31 @@ function Pagination<T>({ table }: React.PropsWithChildren<{ table: ReactTable<T>
             <div className="flex items-center space-x-4">
                 <Select defaultValue="0"
                     value={`${pageSize}`}
-                    onValueChange={(value) => table.setPageSize(Number(value))}>
+                    onValueChange={(value) => {
+                        let size = Number(value);
+                        if (size === 0) {
+                            for (let row of table.getExpandedRowModel().rows) {
+                                size += row.getLeafRows().length;
+                            }
+                        }
+                        table.setPageSize(size);
+                    }}>
                     <SelectPrimitive.Trigger>
                         <div className="px-1 py-0 hover:bg-inherit text-muted-foreground text-xs">
                             {pageIndex * pageSize}&nbsp;-&nbsp;
                             {Math.min((pageIndex + 1) * pageSize, rowCount)}&nbsp;of&nbsp;
                             {rowCount}
                         </div>
                     </SelectPrimitive.Trigger>
-                    <SelectContent side="top"><SelectGroup>
-                        <SelectLabel>Rows per page</SelectLabel>
-                        {[10, 20, 30, 40, 50].map((pageSize) => (
-                            <SelectItem key={pageSize} value={`${pageSize}`}>
-                                {pageSize}
-                            </SelectItem>
-                        ))}</SelectGroup>
+                    <SelectContent side="top">
+                        <SelectGroup>
+                            <SelectLabel>Rows per page</SelectLabel>
+                            {[10, 20, 30, 40, 50, 0].map((pageSize) => (
+                                <SelectItem key={pageSize} value={`${pageSize}`}>
+                                    {pageSize > 0 ? pageSize : 'disable pagination'}
+                                </SelectItem>
+                            ))}
+                        </SelectGroup>
                     </SelectContent>
                 </Select>
                 <div className="flex items-center space-x-2">