103 lines
3.3 KiB
TypeScript
103 lines
3.3 KiB
TypeScript
import {
|
|
ChevronLeftIcon,
|
|
ChevronRightIcon,
|
|
DoubleArrowLeftIcon,
|
|
DoubleArrowRightIcon
|
|
} from "@radix-ui/react-icons"
|
|
import type { Table } from "@tanstack/react-table"
|
|
|
|
import { Button } from "./ui/button"
|
|
import {
|
|
Select,
|
|
SelectContent,
|
|
SelectItem,
|
|
SelectTrigger,
|
|
SelectValue
|
|
} from "./ui/select"
|
|
|
|
interface DataTablePaginationProps<TData> {
|
|
table: Table<TData>
|
|
}
|
|
|
|
export function DataTablePagination<TData>({
|
|
table
|
|
}: DataTablePaginationProps<TData>) {
|
|
return (
|
|
<div className="flex items-center justify-between px-2 border border-t-2 border-x-0 h-14">
|
|
<div className="flex items-center space-x-2">
|
|
<p className="text-sm font-bold text-primary-1">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">
|
|
{[10, 20, 30, 40, 50].map((pageSize) => (
|
|
<SelectItem key={pageSize} value={`${pageSize}`}>
|
|
{pageSize}
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
<div className="flex items-center space-x-6 lg:space-x-8">
|
|
<div className="flex items-center justify-center text-sm font-bold text-primary-1">
|
|
Showing
|
|
<span className="text-white mx-1">
|
|
{` ${
|
|
table.getState().pagination.pageIndex *
|
|
table.getState().pagination.pageSize +
|
|
1
|
|
} to ${
|
|
(table.getState().pagination.pageIndex + 1) * table.getRowCount()
|
|
} `}
|
|
</span>
|
|
of {table.getRowCount()}
|
|
</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>
|
|
<DoubleArrowLeftIcon 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>
|
|
<ChevronLeftIcon 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>
|
|
<ChevronRightIcon 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>
|
|
<DoubleArrowRightIcon className="h-4 w-4" />
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|