47 lines
1.4 KiB
TypeScript
47 lines
1.4 KiB
TypeScript
|
'use no memo';
|
|||
|
|
'use client';
|
|||
|
|
|
|||
|
|
import { useCallback } from 'react';
|
|||
|
|
import { type Table } from '@tanstack/react-table';
|
|||
|
|
|
|||
|
|
import { prefixes } from '@/utils/constants';
|
|||
|
|
|
|||
|
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../input/select';
|
|||
|
|
|
|||
|
|
interface SelectPaginationProps<TData> {
|
|||
|
|
id?: string;
|
|||
|
|
table: Table<TData>;
|
|||
|
|
paginationOptions: number[];
|
|||
|
|
onChange?: (newValue: number) => void;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
export function SelectPagination<TData>({ id, table, paginationOptions, onChange }: SelectPaginationProps<TData>) {
|
|||
|
|
const handlePaginationOptionsChange = useCallback(
|
|||
|
|
(newValue: string) => {
|
|||
|
|
const perPage = Number(newValue);
|
|||
|
|
table.setPageSize(perPage);
|
|||
|
|
onChange?.(perPage);
|
|||
|
|
},
|
|||
|
|
[table, onChange]
|
|||
|
|
);
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<Select onValueChange={handlePaginationOptionsChange} defaultValue={String(table.getState().pagination.pageSize)}>
|
|||
|
|
<SelectTrigger
|
|||
|
|
id={id}
|
|||
|
|
aria-label='Выбор количества строчек на странице'
|
|||
|
|
className='mx-2 cursor-pointer bg-transparent focus-outline border-0 w-28 max-h-6 px-2 justify-end'
|
|||
|
|
>
|
|||
|
|
<SelectValue />
|
|||
|
|
</SelectTrigger>
|
|||
|
|
<SelectContent>
|
|||
|
|
{paginationOptions?.map(option => (
|
|||
|
|
<SelectItem key={`${prefixes.page_size}${option}`} value={String(option)}>
|
|||
|
|
{option} на стр
|
|||
|
|
</SelectItem>
|
|||
|
|
))}
|
|||
|
|
</SelectContent>
|
|||
|
|
</Select>
|
|||
|
|
);
|
|||
|
|
}
|