46 lines
1.2 KiB
TypeScript
46 lines
1.2 KiB
TypeScript
import {
|
|
Select,
|
|
SelectContent,
|
|
SelectItem,
|
|
SelectTrigger,
|
|
SelectValue
|
|
} from "@/components/ui/select";
|
|
|
|
interface RowsPerPageProps {
|
|
pageSize: number;
|
|
onPageSizeChange: (pageSize: number) => void;
|
|
options?: number[];
|
|
}
|
|
|
|
export function RowsPerPage({
|
|
pageSize,
|
|
onPageSizeChange,
|
|
options = [5, 10, 15, 20]
|
|
}: RowsPerPageProps) {
|
|
return (
|
|
<div className="flex items-center gap-2">
|
|
<span className="text-sm text-muted-foreground">Hiển thị</span>
|
|
<Select
|
|
value={pageSize?.toString()}
|
|
onValueChange={(value) => onPageSizeChange(Number(value))}>
|
|
<SelectTrigger className="h-8 w-[70px]">
|
|
<SelectValue placeholder={pageSize?.toString()} />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
{!options.includes(pageSize) && (
|
|
<SelectItem value={pageSize?.toString()} disabled>
|
|
{pageSize}
|
|
</SelectItem>
|
|
)}
|
|
{options.map((option) => (
|
|
<SelectItem key={option} value={option?.toString()}>
|
|
{option}
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
<span className="text-sm text-muted-foreground">mục</span>
|
|
</div>
|
|
);
|
|
}
|