103 lines
3.6 KiB
TypeScript
103 lines
3.6 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 {
|
||
|
|
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'>
|
||
|
|
{table.getFilteredSelectedRowModel().rows.length} de{" "}
|
||
|
|
{table.getFilteredRowModel().rows.length} filas(s) seleccionadas.
|
||
|
|
</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'>Filas por página</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'>
|
||
|
|
Página {table.getState().pagination.pageIndex + 1} de {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'>Ir a la primera página</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'>Ir a la página anterior</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'>Ir a la página siguiente</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'>Ir a la última página</span>
|
||
|
|
<ChevronsRightIcon className='w-4 h-4' />
|
||
|
|
</Button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|