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

2025-03-28 00:19:01 +07:00
parent 2d541c71ba
commit 2ec6ad5b5c
3 changed files with 101 additions and 54 deletions
@@ -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;
-    key?: keyof T;
-    render?: (item: T, index: number) => ReactNode;
-    className?: string;
+    accessorKey?: keyof T;
+    header: string;
+    cell?: (info: any) => ReactNode;
  }[];
-  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>
-            {showCheckbox && (
-              <th className="py-3 px-5 text-left font-normal rounded-l-lg">
-                <input type="checkbox" className="rounded" />
-              </th>
-            )}
-            {headers.map((header, index) => {
-              const isFirst = index === 0 && !showCheckbox;
-              const isLast = index === headers.length - 1;
-              return (
-                <th
-                  key={index}
-                  className={`py-3 px-5 text-left font-normal ${
-                    isFirst ? 'rounded-l-lg' : ''
-                  } ${isLast ? 'rounded-r-lg' : ''} ${header.className || ''}`}
-                >
-                  {header.label}
+          {table.getHeaderGroups().map((headerGroup) => (
+            <tr key={headerGroup.id}>
+              {headerGroup.headers.map((header) => (
+                <th key={header.id}>
+                  {header.isPlaceholder ? null : (
+                    <div>
+                      {typeof header.column.columnDef.header === 'function'
+                        ? header.column.columnDef.header(header.getContext())
+                        : header.column.columnDef.header}
+                    </div>
+                  )}
                </th>
-              );
-            })}
-          </tr>
+              ))}
+            </tr>
+          ))}
        </thead>
        <tbody className="mt-3">
-          {data.map((item, rowIndex) => (
+          {table.getRowModel().rows.map((row) => (
            <tr
-              key={rowIndex}
-              className={rowIndex % 2 === 0 ? 'bg-white' : 'bg-primary-100'}
-              onClick={() => onRowClick && onRowClick(item)}
+              key={row.id}
+              onClick={() => onRowClick && onRowClick(row.original)}
            >
-              {showCheckbox && (
-                <td className="py-3 px-5 rounded-l-lg">
-                  <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>
-                );
-              })}
+              {row.getVisibleCells().map((cell) => (
+                <td key={cell.id}>{cell.getValue() as ReactNode}</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>
  );
 };
@@ -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",
@@ -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",