import { ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight } from "@repo/design/base/icons";
import { Table } from "@tanstack/react-table";
import { Button } from "@repo/design/shadcn/button";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@repo/design/shadcn/select";
interface DataTablePaginationProps<TData> {
table: Table<TData>;
totalCount?: number;
}
export function DataTablePagination<TData>({ table, totalCount }: DataTablePaginationProps<TData>) {
const pages = totalCount ? [10, 20, 30, 40, 50] : [10, 50, 100, 200, 500];
return (
<div className="flex items-center justify-between px-2">
<div className="flex-1 text-sm text-muted-foreground">
{totalCount
? `${table.getState().pagination.pageIndex * table.getState().pagination.pageSize + 1}-${Math.min(
(table.getState().pagination.pageIndex + 1) * table.getState().pagination.pageSize,
totalCount
)} of ${totalCount} rows`
: `${table.getFilteredSelectedRowModel().rows.length} of ${
table.getFilteredRowModel().rows.length
} row(s) selected.`}
</div>
<div className="flex items-center space-x-6 lg:space-x-8">
<div className="flex items-center space-x-2">
<p className="text-sm font-medium">Rows per page</p>
<Select
value={`${table.getState().pagination.pageSize}`}
onValueChange={(value) => {
table.setPageSize(Number(value));
}}
>
<SelectTrigger className="h-8 w-[70px]">
<SelectValue placeholder={table.getState().pagination.pageSize} />
</SelectTrigger>
<SelectContent side="top">
{pages.map((pageSize) => (
<SelectItem key={pageSize} value={`${pageSize}`}>
{pageSize}
</SelectItem>
))}
</SelectContent>
</Select>
</div>
<div className="flex w-[100px] items-center justify-center text-sm font-medium">
Page {table.getState().pagination.pageIndex + 1} of {table.getPageCount()}
</div>
<div className="flex items-center space-x-2">
<Button
variant="outline"
className="hidden h-8 w-8 p-0 lg:flex"
onClick={() => table.setPageIndex(0)}
disabled={!table.getCanPreviousPage()}
>
<span className="sr-only">Go to first page</span>
<ChevronsLeft className="h-4 w-4" />
</Button>
<Button
variant="outline"
className="h-8 w-8 p-0"
onClick={() => table.previousPage()}
disabled={!table.getCanPreviousPage()}
>
<span className="sr-only">Go to previous page</span>
<ChevronLeft className="h-4 w-4" />
</Button>
<Button
variant="outline"
className="h-8 w-8 p-0"
onClick={() => table.nextPage()}
disabled={!table.getCanNextPage()}
>
<span className="sr-only">Go to next page</span>
<ChevronRight className="h-4 w-4" />
</Button>
<Button
variant="outline"
className="hidden h-8 w-8 p-0 lg:flex"
onClick={() => table.setPageIndex(table.getPageCount() - 1)}
disabled={!table.getCanNextPage()}
>
<span className="sr-only">Go to last page</span>
<ChevronsRight className="h-4 w-4" />
</Button>
</div>
</div>
</div>
);
}