diff --git a/web/src/components/table-pagination.tsx b/web/src/components/table-pagination.tsx index 036f5b4..6b1aea2 100644 --- a/web/src/components/table-pagination.tsx +++ b/web/src/components/table-pagination.tsx @@ -1,22 +1,12 @@ "use client"; -import * as React from "react"; +import { useEffect, useRef } from "react"; + import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react"; import { Button } from "@/components/ui/button"; -import { - Pagination, - PaginationContent, - PaginationEllipsis, - PaginationItem, -} from "@/components/ui/pagination"; -import { - Select, - SelectContent, - SelectItem, - SelectTrigger, - SelectValue, -} from "@/components/ui/select"; +import { Pagination, PaginationContent, PaginationEllipsis, PaginationItem } from "@/components/ui/pagination"; +import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"; interface TablePaginationProps { page: number; // 1-based @@ -49,19 +39,20 @@ export function TablePagination({ pageSizeOptions = [10, 20, 50], }: TablePaginationProps) { const totalPages = Math.max(1, Math.ceil(total / pageSize)); - const from = total === 0 ? 0 : (page - 1) * pageSize + 1; - const to = Math.min(page * pageSize, total); + const safePage = Math.min(Math.max(1, page), totalPages); + const from = total === 0 ? 0 : (safePage - 1) * pageSize + 1; + const to = Math.min(safePage * pageSize, total); + const onPageChangeRef = useRef(onPageChange); + onPageChangeRef.current = onPageChange; + + useEffect(() => { + if (page !== safePage) onPageChangeRef.current(safePage); + }, [page, safePage]); return (
- onPageSizeChange(Number(v))}> @@ -90,14 +81,14 @@ export function TablePagination({ - {pageWindows(page, totalPages).map((p, i) => + {pageWindows(safePage, totalPages).map((p, i) => p === "..." ? ( @@ -105,10 +96,10 @@ export function TablePagination({ ) : ( @@ -119,8 +110,8 @@ export function TablePagination({