diff --git a/packages/common/business_components/src/ui/table/index.tsx b/packages/common/business_components/src/ui/table/index.tsx
index 9635a7e21..5413fbf78 100644
--- a/packages/common/business_components/src/ui/table/index.tsx
+++ b/packages/common/business_components/src/ui/table/index.tsx
@@ -1,4 +1,5 @@
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@common/components";
+import { useState } from "react";
 import UiPageNations from "./uiPageNations";
 
 type UiTableProps = {
@@ -9,6 +10,7 @@ type UiTableProps = {
   total: number;
   children: React.ReactNode | undefined;
   cellClick : ((index:number|undefined)=>void) | undefined;
+  onPageChange: (page: number) => void;
 }
 
 type UiHeadProps = {
@@ -16,9 +18,12 @@ type UiHeadProps = {
   title: string;
 }
 
-export function UiTable({ tableData, headlist, pageSize, total, children, headName, cellClick }: UiTableProps) {
-  const cur = 1;
-
+export function UiTable({ tableData, headlist, pageSize, total, children, headName, cellClick, onPageChange }: UiTableProps) {
+  const [cur, setCur] = useState<number>(1);
+  const handlePageChange = (page: number) => {
+    setCur(page);
+    onPageChange(page);
+  }
   return (
     <>
       {headName ? <div className="card-header">
@@ -43,7 +48,7 @@ export function UiTable({ tableData, headlist, pageSize, total, children, headNa
           ))}
         </TableBody>
         </Table>
-        {total <= 0 ? <></> : <UiPageNations total={total} cur={cur} pageSize={pageSize} />}
+        {total <= 0 ? <></> : <UiPageNations total={total} cur={cur} pageSize={pageSize} onPageChange={handlePageChange} />}
       </div>
     </>
   );
diff --git a/packages/common/business_components/src/ui/table/uiPageNations.tsx b/packages/common/business_components/src/ui/table/uiPageNations.tsx
index 99199d163..891fc4c81 100644
--- a/packages/common/business_components/src/ui/table/uiPageNations.tsx
+++ b/packages/common/business_components/src/ui/table/uiPageNations.tsx
@@ -1,19 +1,18 @@
 'use client';
 
 import { useEffect, useState } from "react";
-import { 
-  Pagination, 
-  PaginationContent, 
-  PaginationItem, 
-  PaginationPrevious, 
-  PaginationLink, 
-  PaginationNext 
-} from "./lib/pagination";
+import { PaginationNext } from "./lib/pagination";
+import { PaginationLink } from "./lib/pagination";
+import { PaginationPrevious } from "./lib/pagination";
+import { PaginationItem } from "./lib/pagination";
+import { PaginationContent } from "./lib/pagination";
+import { Pagination } from "./lib/pagination";
 
 interface CommonPageNationsProps {
   total: number;
   cur: number;
   pageSize: number;
+  onPageChange: (page: number) => void;
 }
 
 export default function UiPageNations(commonPageNationsProps: CommonPageNationsProps) {
@@ -30,7 +29,7 @@ export default function UiPageNations(commonPageNationsProps: CommonPageNationsP
   const endPage = Math.min(startPage + pagesPerGroup - 1, totalPages);
 
   const handlePageChange = (page: number) => {
-    setPageProps({ ...pageProps, cur: page });
+    pageProps.onPageChange(page);
   };
 
   return (