markus/finances
1
0
Fork 0
mirror of https://codeberg.org/MarkusThielker/finances.git synced 2025-04-12 05:08:43 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

N-FIN-19: add page size drop down

Browse source 
The default page size is set to 50
This commit is contained in:
Markus Thielker 2024-03-11 10:27:52 +01:00
parent cbae95b733
commit 7660f1037b
No known key found for this signature in database
1 changed files with 65 additions and 37 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

102
src/components/ui/data-table.tsx
View file

@ -4,8 +4,9 @@ import { ColumnDef, flexRender, getCoreRowModel, getPaginationRowModel, useReact
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'; import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
import { Button } from '@/components/ui/button'; import { Button } from '@/components/ui/button';
import React from 'react'; import React, { useEffect, useState } from 'react';
import { ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight } from 'lucide-react'; import { ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight } from 'lucide-react';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
interface DataTableProps<TData, TValue> { interface DataTableProps<TData, TValue> {
columns: ColumnDef<TData, TValue>[]; columns: ColumnDef<TData, TValue>[];
@ -20,6 +21,7 @@ export function DataTable<TData, TValue>({
pagination, pagination,
className, className,
}: DataTableProps<TData, TValue>) { }: DataTableProps<TData, TValue>) {
const table = useReactTable({ const table = useReactTable({
data, data,
columns, columns,
@ -27,6 +29,13 @@ export function DataTable<TData, TValue>({
getPaginationRowModel: pagination ? getPaginationRowModel() : undefined, getPaginationRowModel: pagination ? getPaginationRowModel() : undefined,
}); });
const [pageSize, setPageSize] = useState(50);
useEffect(() => {
if (pagination) {
table.setPageSize(pageSize);
}
}, [table, pagination, pageSize]);
return ( return (
<div className={className}> <div className={className}>
<div className="rounded-md border"> <div className="rounded-md border">
@ -75,43 +84,62 @@ export function DataTable<TData, TValue>({
</div> </div>
{ {
pagination && ( pagination && (
<div className="flex items-center justify-end space-x-2 py-4"> <div className="flex items-center justify-between py-4">
<Button <Select
variant="outline" onValueChange={(value) => {
size="icon" setPageSize(parseInt(value));
onClick={() => table.firstPage()} }}
disabled={!table.getCanPreviousPage()} value={pageSize.toString()}
> >
<span className="sr-only">First page</span> <SelectTrigger className="w-[150px]">
<ChevronsLeft/> <SelectValue placeholder="Select a scope"/>
</Button> </SelectTrigger>
<Button <SelectContent>
variant="outline" <SelectItem value={'25'} key={'25'}>25</SelectItem>
size="icon" <SelectItem value={'50'} key={'50'}>50</SelectItem>
onClick={() => table.previousPage()} <SelectItem value={'75'} key={'75'}>75</SelectItem>
disabled={!table.getCanPreviousPage()} <SelectItem value={'100'} key={'100'}>100</SelectItem>
> </SelectContent>
<span className="sr-only">Previous page</span> </Select>
<ChevronLeft/>
</Button> <div className="flex flex-row items-center space-x-2">
<Button <Button
variant="outline" variant="outline"
size="icon" size="icon"
onClick={() => table.nextPage()} onClick={() => table.firstPage()}
disabled={!table.getCanNextPage()} disabled={!table.getCanPreviousPage()}
> >
<span className="sr-only">Next page</span> <span className="sr-only">First page</span>
<ChevronRight/> <ChevronsLeft/>
</Button> </Button>
<Button <Button
variant="outline" variant="outline"
size="icon" size="icon"
onClick={() => table.lastPage()} onClick={() => table.previousPage()}
disabled={!table.getCanNextPage()} disabled={!table.getCanPreviousPage()}
> >
<span className="sr-only">Last page</span> <span className="sr-only">Previous page</span>
<ChevronsRight/> <ChevronLeft/>
</Button> </Button>
<Button
variant="outline"
size="icon"
onClick={() => table.nextPage()}
disabled={!table.getCanNextPage()}
>
<span className="sr-only">Next page</span>
<ChevronRight/>
</Button>
<Button
variant="outline"
size="icon"
onClick={() => table.lastPage()}
disabled={!table.getCanNextPage()}
>
<span className="sr-only">Last page</span>
<ChevronsRight/>
</Button>
</div>
</div> </div>
) )
} }