feat: Add TanStack Table v8 and implement it to Datatable component

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

@@ -1,84 +1,96 @@
 import { ReactElement, ReactNode } from 'react';
+import {
+  useReactTable,
+  getCoreRowModel,
+  getPaginationRowModel,
+  getFilteredRowModel,
+} from '@tanstack/react-table';
 
 interface DataTableProps<T> {
   data: T[];
   headers: {
-    label: string;
+    accessorKey?: keyof T;
-    key?: keyof T;
+    header: string;
-    render?: (item: T, index: number) => ReactNode;
+    cell?: (info: any) => ReactNode;
-    className?: string;
   }[];
-  showCheckbox?: boolean;
   onRowClick?: (item: T) => void;
 }
 
 export const DataTable = <T extends Record<string, any>>({
   data,
   headers,
-  showCheckbox = true,
   onRowClick,
 }: DataTableProps<T>): ReactElement => {
+  const table = useReactTable({
+    data,
+    columns: headers.map((header) => ({
+      accessorKey: header.accessorKey,
+      header: header.header,
+      cell: header.cell,
+    })),
+    getCoreRowModel: getCoreRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    getFilteredRowModel: getFilteredRowModel(),
+  });
   return (
     <div className="w-full overflow-x-auto">
       <table className="w-full min-w-full text-base">
         <thead className="bg-primary-50 mb-3">
-          <tr>
+          {table.getHeaderGroups().map((headerGroup) => (
-            {showCheckbox && (
+            <tr key={headerGroup.id}>
-              <th className="py-3 px-5 text-left font-normal rounded-l-lg">
+              {headerGroup.headers.map((header) => (
-                <input type="checkbox" className="rounded" />
+                <th key={header.id}>
-              </th>
+                  {header.isPlaceholder ? null : (
-            )}
+                    <div>
-            {headers.map((header, index) => {
+                      {typeof header.column.columnDef.header === 'function'
-              const isFirst = index === 0 && !showCheckbox;
+                        ? header.column.columnDef.header(header.getContext())
-              const isLast = index === headers.length - 1;
+                        : header.column.columnDef.header}
-              return (
+                    </div>
-                <th
+                  )}
-                  key={index}
-                  className={`py-3 px-5 text-left font-normal ${
-                    isFirst ? 'rounded-l-lg' : ''
-                  } ${isLast ? 'rounded-r-lg' : ''} ${header.className || ''}`}
-                >
-                  {header.label}
                 </th>
-              );
+              ))}
-            })}
+            </tr>
-          </tr>
+          ))}
         </thead>
         <tbody className="mt-3">
-          {data.map((item, rowIndex) => (
+          {table.getRowModel().rows.map((row) => (
             <tr
-              key={rowIndex}
+              key={row.id}
-              className={rowIndex % 2 === 0 ? 'bg-white' : 'bg-primary-100'}
+              onClick={() => onRowClick && onRowClick(row.original)}
-              onClick={() => onRowClick && onRowClick(item)}
             >
-              {showCheckbox && (
+              {row.getVisibleCells().map((cell) => (
-                <td className="py-3 px-5 rounded-l-lg">
+                <td key={cell.id}>{cell.getValue() as ReactNode}</td>
-                  <input type="checkbox" className="rounded" />
+              ))}
-                </td>
-              )}
-              {headers.map((header, colIndex) => {
-                const isFirst = colIndex === 0 && !showCheckbox;
-                const isLast = colIndex === headers.length - 1;
-
-                return (
-                  <td
-                    key={colIndex}
-                    className={`py-3 px-5 ${isFirst ? 'rounded-l-lg' : ''} ${
-                      isLast ? 'rounded-r-lg' : ''
-                    }`}
-                  >
-                    {header.render
-                      ? header.render(item, rowIndex)
-                      : header.key
-                      ? item[header.key]
-                      : null}
-                  </td>
-                );
-              })}
             </tr>
           ))}
         </tbody>
       </table>
+      <div>
+        <button
+          onClick={() => table.setPageIndex(0)}
+          disabled={!table.getCanPreviousPage()}
+        >
+          {'<<'}
+        </button>
+        <button
+          onClick={() => table.previousPage()}
+          disabled={!table.getCanPreviousPage()}
+        >
+          {'<'}
+        </button>
+        <button
+          onClick={() => table.nextPage()}
+          disabled={!table.getCanNextPage()}
+        >
+          {'>'}
+        </button>
+        <button
+          onClick={() => table.setPageIndex(table.getPageCount() - 1)}
+          disabled={!table.getCanNextPage()}
+        >
+          {'>>'}
+        </button>
+      </div>
     </div>
   );
 };

package-lock.json

@@ -11,6 +11,7 @@
       "dependencies": {
         "@ant-design/icons": "^5.6.1",
         "@tanstack/react-query": "^5.67.3",
+        "@tanstack/react-table": "^8.21.2",
         "axios": "^1.8.3",
         "clsx": "^2.1.1",
         "react": "^19.0.0",
@@ -8817,6 +8818,39 @@
         "react": "^18 || ^19"
       }
     },
+    "node_modules/@tanstack/react-table": {
+      "version": "8.21.2",
+      "resolved": "https://registry.npmjs.org/@tanstack/react-table/-/react-table-8.21.2.tgz",
+      "integrity": "sha512-11tNlEDTdIhMJba2RBH+ecJ9l1zgS2kjmexDPAraulc8jeNA4xocSNeyzextT0XJyASil4XsCYlJmf5jEWAtYg==",
+      "license": "MIT",
+      "dependencies": {
+        "@tanstack/table-core": "8.21.2"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      },
+      "peerDependencies": {
+        "react": ">=16.8",
+        "react-dom": ">=16.8"
+      }
+    },
+    "node_modules/@tanstack/table-core": {
+      "version": "8.21.2",
+      "resolved": "https://registry.npmjs.org/@tanstack/table-core/-/table-core-8.21.2.tgz",
+      "integrity": "sha512-uvXk/U4cBiFMxt+p9/G7yUWI/UbHYbyghLCjlpWZ3mLeIZiUBSKcUnw9UnKkdRz7Z/N4UBuFLWQdJCjUe7HjvA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      }
+    },
     "node_modules/@testing-library/dom": {
       "version": "10.4.0",
       "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-10.4.0.tgz",

package.json

@@ -20,6 +20,7 @@
   "dependencies": {
     "@ant-design/icons": "^5.6.1",
     "@tanstack/react-query": "^5.67.3",
+    "@tanstack/react-table": "^8.21.2",
     "axios": "^1.8.3",
     "clsx": "^2.1.1",
     "react": "^19.0.0",