110 lines
3.8 KiB
TypeScript
110 lines
3.8 KiB
TypeScript
import { DEFAULT_PAGE_SIZES, INITIAL_PAGE_INDEX } from "@/lib/hooks";
|
|
import { cn } from "@/lib/utils";
|
|
import { Button, Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/ui";
|
|
import { Table } from "@tanstack/react-table";
|
|
import { t } from "i18next";
|
|
import {
|
|
ChevronLeftIcon,
|
|
ChevronRightIcon,
|
|
ChevronsLeftIcon,
|
|
ChevronsRightIcon,
|
|
} from "lucide-react";
|
|
import { useMemo } from "react";
|
|
|
|
export type DataTablePaginationProps<TData> = {
|
|
table: Table<TData>;
|
|
className?: string;
|
|
visible?: boolean | "auto";
|
|
};
|
|
|
|
export function DataTablePagination<TData>({
|
|
table,
|
|
className,
|
|
visible = "auto",
|
|
}: DataTablePaginationProps<TData>) {
|
|
const isVisible = useMemo(() => visible === true, [visible]);
|
|
const isAuto = useMemo(() => visible === "auto", [visible]);
|
|
|
|
if (!isVisible || (isAuto && table.getPageCount() < 1)) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<div className={cn("flex items-center justify-between px-2", className)}>
|
|
<div className='flex-1 text-base text-muted-foreground'>
|
|
{t("common.rows_selected", {
|
|
count: table.getFilteredSelectedRowModel().rows.length,
|
|
total: table.getFilteredRowModel().rows.length,
|
|
})}
|
|
</div>
|
|
<div className='flex items-center space-x-6 lg:space-x-8'>
|
|
<div className='flex items-center space-x-2'>
|
|
<p className='text-base font-medium'>{t("common.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'>
|
|
{DEFAULT_PAGE_SIZES.map((pageSize) => (
|
|
<SelectItem key={pageSize} value={`${pageSize}`}>
|
|
{pageSize}
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
<div className='flex w-[100px] items-center justify-center text-base font-medium'>
|
|
{t("common.num_page_of_total", {
|
|
count: table.getState().pagination.pageIndex + 1,
|
|
total: table.getPageCount(),
|
|
})}
|
|
</div>
|
|
<div className='flex items-center space-x-2'>
|
|
<Button
|
|
variant='outline'
|
|
className='hidden w-8 h-8 p-0 lg:flex'
|
|
onClick={() => table.setPageIndex(INITIAL_PAGE_INDEX)}
|
|
disabled={!table.getCanPreviousPage()}
|
|
>
|
|
<span className='sr-only'>{t("common.go_to_first_page")}</span>
|
|
<ChevronsLeftIcon className='w-4 h-4' />
|
|
</Button>
|
|
<Button
|
|
variant='outline'
|
|
className='w-8 h-8 p-0'
|
|
onClick={() => table.previousPage()}
|
|
disabled={!table.getCanPreviousPage()}
|
|
>
|
|
<span className='sr-only'>{t("common.go_to_prev_page")}</span>
|
|
<ChevronLeftIcon className='w-4 h-4' />
|
|
</Button>
|
|
<Button
|
|
variant='outline'
|
|
className='w-8 h-8 p-0'
|
|
onClick={() => table.nextPage()}
|
|
disabled={!table.getCanNextPage()}
|
|
>
|
|
<span className='sr-only'>{t("common.go_to_next_page")}</span>
|
|
<ChevronRightIcon className='w-4 h-4' />
|
|
</Button>
|
|
<Button
|
|
variant='outline'
|
|
className='hidden w-8 h-8 p-0 lg:flex'
|
|
onClick={() => table.setPageIndex(table.getPageCount() + 1)}
|
|
disabled={!table.getCanNextPage()}
|
|
>
|
|
<span className='sr-only'>{t("common.go_to_last_page")}</span>
|
|
<ChevronsRightIcon className='w-4 h-4' />
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|