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 {
+interface PaginationProps<T> {
-  currentPage: number;
+  table: Table<T>;
-  totalPages: number;
-  onPageChange: (page: number) => void;
 }
 
-export const Pagination: FC<PaginationProps> = ({
+export const Pagination = <T,>({ table }: PaginationProps<T>) => {
-  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;
-  };
-
   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) =>
+        {table.getPageCount() <= 8 ? (
-          typeof page === 'number' ? (
+          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>
-          ) : (
+            {table.getState().pagination.pageIndex > 3 && <span>...</span>}
-            <span key={index} className="px-1">
+            {Array.from(
-              {page}
+              { length: 5 },
-            </span>
+              (_, 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;

libs/ui/src/organisms/datatable/datatable.tsx

@@ -6,6 +6,8 @@ import {
   flexRender,
   ColumnDef,
 } from '@tanstack/react-table';
+import { Pagination } from '../../molecules';
+
 import React from 'react';
 
 interface DataTableProps<T> {
@@ -36,42 +38,45 @@ export const DataTable = <T,>({
   });
 
   return (
-    <div className="w-full overflow-x-auto">
+    <div className="flex flex-col gap-8">
-      <table className="w-full min-w-full text-base">
+      <div className="w-full overflow-x-auto">
-        <thead className="bg-primary-50 mb-3 text-left">
+        <table className="w-full min-w-full text-base">
-          {table.getHeaderGroups().map((headerGroup) => (
+          <thead className="bg-primary-50 mb-3 text-left">
-            <tr key={headerGroup.id}>
+            {table.getHeaderGroups().map((headerGroup) => (
-              {headerGroup.headers.map((header) => (
+              <tr key={headerGroup.id}>
-                <th
+                {headerGroup.headers.map((header) => (
-                  key={header.id}
+                  <th
-                  className="py-3 px-5 font-normal first:rounded-l-lg last:rounded-r-lg"
+                    key={header.id}
-                >
+                    className="py-3 px-5 font-normal first:rounded-l-lg last:rounded-r-lg"
-                  {header.isPlaceholder
+                  >
-                    ? null
+                    {header.isPlaceholder
-                    : flexRender(
+                      ? null
-                        header.column.columnDef.header,
+                      : flexRender(
-                        header.getContext()
+                          header.column.columnDef.header,
-                      )}
+                          header.getContext()
-                </th>
+                        )}
-              ))}
+                  </th>
-            </tr>
+                ))}
-          ))}
+              </tr>
-        </thead>
+            ))}
-        <tbody className="mt-3">
+          </thead>
-          {table.getRowModel().rows.map((row) => (
+          <tbody className="mt-3">
-            <tr key={row.id} className="bg-primary-100 odd:bg-white">
+            {table.getRowModel().rows.map((row) => (
-              {row.getVisibleCells().map((cell, index) => (
+              <tr key={row.id} className="bg-primary-100 odd:bg-white">
-                <td
+                {row.getVisibleCells().map((cell, index) => (
-                  key={cell.id}
+                  <td
-                  className="py-3 px-5 first:rounded-l-lg last:rounded-r-lg"
+                    key={cell.id}
-                >
+                    className="py-3 px-5 first:rounded-l-lg last:rounded-r-lg"
-                  {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                  >
-                </td>
+                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
-              ))}
+                  </td>
-            </tr>
+                ))}
-          ))}
+              </tr>
-        </tbody>
+            ))}
-      </table>
+          </tbody>
+        </table>
+      </div>
+      <Pagination table={table} />
     </div>
   );
 };