feat: Combine Pagination component into DataTable

libs/ui/src/molecules/index.ts

@@ -1 +1,2 @@
 export * from './input-form';
+export * from './pagination';

libs/ui/src/molecules/pagination/index.ts

@@ -1 +1 @@
-export {};
+export * from './pagination';

libs/ui/src/molecules/pagination/pagination.tsx

@@ -1,82 +1,89 @@
-import { FC, ReactElement } from 'react';
+import { Table } from '@tanstack/react-table';
 import { ArrowLeftOutlined, ArrowRightOutlined } from '@ant-design/icons';
 
-export interface PaginationProps {
-  currentPage: number;
-  totalPages: number;
-  onPageChange: (page: number) => void;
+interface PaginationProps<T> {
+  table: Table<T>;
 }
 
-export const Pagination: FC<PaginationProps> = ({
-  currentPage,
-  totalPages,
-  onPageChange,
-}): ReactElement => {
-  const getPageNumbers = () => {
-    const pages = [];
-    if (currentPage > 3) {
-      pages.push(1);
-      if (currentPage > 4) {
-        pages.push('...');
-      }
-    }
-
-    const startPage = Math.max(1, currentPage - 1);
-    const endPage = Math.min(totalPages, currentPage + 1);
-
-    for (let i = startPage; i <= endPage; i++) {
-      pages.push(i);
-    }
-
-    if (currentPage < totalPages - 2) {
-      if (currentPage < totalPages - 3) {
-        pages.push('...');
-      }
-      pages.push(totalPages);
-    }
-
-    return pages;
-  };
-
+export const Pagination = <T,>({ table }: PaginationProps<T>) => {
   return (
     <div className="flex items-center justify-center gap-[40px]">
       <button
-        onClick={() => currentPage > 1 && onPageChange(currentPage - 1)}
-        disabled={currentPage === 1}
         className="disabled:opacity-50 cursor-pointer"
+        onClick={() => table.previousPage()}
+        disabled={!table.getCanPreviousPage()}
         aria-label="Previous page"
       >
         <ArrowLeftOutlined className="text-[16px] text-neutral-800" />
       </button>
 
       <div className="flex gap-4 items-baseline">
-        {getPageNumbers().map((page, index) =>
-          typeof page === 'number' ? (
+        {table.getPageCount() <= 8 ? (
+          Array.from({ length: table.getPageCount() }, (_, index) => (
             <button
               key={index}
-              onClick={() => onPageChange(page)}
+              className={`size-[30px] py-[8px] flex items-center justify-center rounded-md cursor-pointer  ${
+                table.getState().pagination.pageIndex === index
+                  ? 'bg-primary-500 text-white'
+                  : 'bg-primary-100 hover:bg-primary-200'
+              }`}
+              onClick={() => table.setPageIndex(index)}
+            >
+              {index + 1}
+            </button>
+          ))
+        ) : (
+          <>
+            <button
+              onClick={() => table.setPageIndex(0)}
               className={`size-[30px] py-[8px] flex items-center justify-center rounded-md cursor-pointer ${
-                currentPage === page
+                table.getState().pagination.pageIndex === 0
                   ? 'bg-primary-500 text-white'
                   : 'bg-primary-100 hover:bg-primary-200'
               }`}
             >
-              {page}
+              1
             </button>
-          ) : (
-            <span key={index} className="px-1">
-              {page}
-            </span>
-          )
+            {table.getState().pagination.pageIndex > 3 && <span>...</span>}
+            {Array.from(
+              { length: 5 },
+              (_, index) => table.getState().pagination.pageIndex - 2 + index
+            )
+              .filter((page) => page > 0 && page < table.getPageCount() - 1)
+              .map((page) => (
+                <button
+                  key={page}
+                  onClick={() => table.setPageIndex(page)}
+                  className={`size-[30px] py-[8px] flex items-center justify-center rounded-md cursor-pointer ${
+                    table.getState().pagination.pageIndex === page
+                      ? 'bg-primary-500 text-white'
+                      : 'bg-primary-100 hover:bg-primary-200'
+                  }`}
+                >
+                  {page + 1}
+                </button>
+              ))}
+            {table.getState().pagination.pageIndex <
+              table.getPageCount() - 4 && <span>...</span>}
+            <button
+              onClick={() => table.setPageIndex(table.getPageCount() - 1)}
+              className={`size-[30px] py-[8px] flex items-center justify-center rounded-md cursor-pointer ${
+                table.getState().pagination.pageIndex ===
+                table.getPageCount() - 1
+                  ? 'bg-primary-500 text-white'
+                  : 'bg-primary-100 hover:bg-primary-200'
+              }`}
+            >
+              {table.getPageCount()}
+            </button>
+          </>
         )}
       </div>
 
       <button
-        onClick={() =>
-          currentPage < totalPages && onPageChange(currentPage + 1)
-        }
-        disabled={currentPage === totalPages}
         className="disabled:opacity-50 cursor-pointer"
+        onClick={() => table.nextPage()}
+        disabled={!table.getCanNextPage()}
         aria-label="Next page"
       >
         <ArrowRightOutlined className="text-[16px] text-neutral-800" />
@@ -84,5 +91,3 @@ export const Pagination: FC<PaginationProps> = ({
     </div>
   );
 };
-
-export default Pagination;