Fixed pagination and Master module country updated

src/components/DataTable.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { useState } from "react";
 import { HStack, Stack, Table } from "@chakra-ui/react";
 import { PaginationItems, PaginationNextTrigger, PaginationPrevTrigger, PaginationRoot } from "./ui/pagination";
 // import {
@@ -12,8 +12,13 @@ interface TableProps {
   tableHeadRow: string[];
   data: Record<string, any>[];
   sortableColumns?: string[]; // Specify which columns are sortable
-  paginationData?: any,
-  refetch?: (params?: any) => void;
+  paginationData?: {
+    current_page: number;
+    last_page: number;
+    per_page: number;
+    total: number;
+  },
+  onPageChange?: (page: number) => void;
 }
 
 const DataTable: React.FC<TableProps> = ({
@@ -21,30 +26,18 @@ const DataTable: React.FC<TableProps> = ({
   data,
   sortableColumns = [],
   paginationData,
-  refetch
-}) => {
-  const totalCount = paginationData?.total || 0;
-  const pageSize = paginationData?.per_page || 10;
-  const currentPage = paginationData?.current_page || 1;
-  const lastPage = paginationData?.last_page || 1;
-  const [page, setPage] = useState(currentPage);
-
-  const [sortedData, setSortedData] = useState(data);
+  onPageChange
+}: TableProps) => {
+  const { current_page = 1, last_page = 1 } = paginationData || {};
   const [sortConfig, setSortConfig] = useState<{
     key: string;
     direction: "asc" | "desc";
   } | null>(null);
 
-  useEffect(() => {
-    setSortedData(data);
-  }, [data]);
-
-  const handlePageChange = (newPage: any) => {
-    if (newPage >= 1 && newPage <= lastPage) {
-      setPage(newPage);
-      if (refetch) {
-        refetch({ page: newPage });
-      }
+  const handlePageChange = (details: { page: number }) => {
+    const newPage = details.page;
+    if (newPage >= 1 && newPage <= last_page) {
+      onPageChange?.(newPage);
     }
   };
 
@@ -60,14 +53,9 @@ const DataTable: React.FC<TableProps> = ({
       direction = "desc";
     }
 
-    const sortedArray = [...sortedData].sort((a, b) => {
-      if (a[column] < b[column]) return direction === "asc" ? -1 : 1;
-      if (a[column] > b[column]) return direction === "asc" ? 1 : -1;
-      return 0;
-    });
-
-    setSortedData(sortedArray);
-    setSortConfig({ key: column, direction });
+    const newSortConfig = { key: column, direction };
+    setSortConfig(newSortConfig);
+    onPageChange?.(1);
   };
 
   return (
@@ -110,7 +98,7 @@ const DataTable: React.FC<TableProps> = ({
             </Table.Row>
           </Table.Header>
           <Table.Body>
-            {sortedData.map((item: any, index) => (
+            {data.map((item: any, index) => (
               <Table.Row
                 key={index}
                 bg={index % 2 === 0 ? "#fff" : "#007F3310"}
@@ -139,22 +127,24 @@ const DataTable: React.FC<TableProps> = ({
           </Table.Body>
         </Table.Root>
       </Table.ScrollArea>
-      {lastPage > 1 && <PaginationRoot
-        count={totalCount}
-        pageSize={pageSize}
-        defaultPage={currentPage}
+      {last_page > 1 && (<PaginationRoot
+        count={paginationData?.total ?? 0}
+        pageSize={paginationData?.per_page ?? 0}
+        page={current_page}
+        onPageChange={handlePageChange}
         size={"xs"}
+        siblingCount={1}
         // count={20}
         // pageSize={2}
         // defaultPage={1}
         mb={4}
       >
         <HStack justifyContent="flex-end">
-          <PaginationPrevTrigger onClick={() => handlePageChange(page - 1)} disabled={page === 1} />
+          <PaginationPrevTrigger onClick={() => handlePageChange({ page: current_page - 1 })} disabled={current_page === 1} />
           <PaginationItems />
-          <PaginationNextTrigger onClick={() => handlePageChange(page + 1)} disabled={page === lastPage} />
+          <PaginationNextTrigger onClick={() => handlePageChange({ page: current_page + 1 })} disabled={current_page === last_page} />
         </HStack>
-      </PaginationRoot>}
+      </PaginationRoot>)}
     </Stack>
   );
 };