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 (
-