81 lines
2.2 KiB
TypeScript
81 lines
2.2 KiB
TypeScript
'use client';
|
|
|
|
import { Table } from '@tanstack/react-table';
|
|
import { ChevronLeft, ChevronRight } from 'lucide-react';
|
|
|
|
import { Button } from '@/components/ui/button';
|
|
import {
|
|
Select,
|
|
SelectContent,
|
|
SelectItem,
|
|
SelectTrigger,
|
|
SelectValue,
|
|
} from '@/components/ui/select';
|
|
|
|
const PAGE_SIZE_OPTIONS = [10, 20, 40, 50, 100];
|
|
|
|
export function TableFooter<TData>({
|
|
table,
|
|
totalItems,
|
|
pageSize,
|
|
onPageSizeChange,
|
|
}: {
|
|
table: Table<TData>;
|
|
totalItems: number;
|
|
pageSize?: number;
|
|
onPageSizeChange?: (pageSize: number) => void;
|
|
}) {
|
|
const rows = table.getRowModel().rows.length;
|
|
const currentPageSize = pageSize ?? table.getState().pagination.pageSize;
|
|
|
|
return (
|
|
<div className="flex flex-col gap-3 text-sm text-muted-foreground sm:flex-row sm:items-center sm:justify-between">
|
|
<div className="flex flex-wrap items-center gap-3">
|
|
<span>
|
|
Showing {rows} of {totalItems}
|
|
</span>
|
|
{onPageSizeChange ? (
|
|
<div className="flex items-center gap-2">
|
|
<span>Rows per page</span>
|
|
<Select
|
|
value={String(currentPageSize)}
|
|
onValueChange={(value) => onPageSizeChange(Number(value))}
|
|
>
|
|
<SelectTrigger className="h-8 w-18 bg-background">
|
|
<SelectValue />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
{PAGE_SIZE_OPTIONS.map((size) => (
|
|
<SelectItem key={size} value={String(size)}>
|
|
{size}
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
<div className="flex gap-2">
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
onClick={() => table.previousPage()}
|
|
disabled={!table.getCanPreviousPage()}
|
|
>
|
|
<ChevronLeft className="size-4" />
|
|
Previous
|
|
</Button>
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
onClick={() => table.nextPage()}
|
|
disabled={!table.getCanNextPage()}
|
|
>
|
|
Next
|
|
<ChevronRight className="size-4" />
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|