feat: separate DataTable component

apps/backoffice/src/app/accounts/page.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-import { FC, ReactElement, useState } from 'react';
+import { FC, ReactElement } from 'react';
 import {
   FilterOutlined,
   SearchOutlined,
@@ -9,7 +9,6 @@ import {
   ArrowLeftOutlined,
 } from '@ant-design/icons';
 import { Button, Input } from '@imphnen-frontend-service/ui/atoms';
-import { Pagination } from '@imphnen-frontend-service/ui/molecules';
 import { DataTable } from '@imphnen-frontend-service/ui/organisms';
 
 import {
@@ -130,75 +129,7 @@ export const Components: FC = (): ReactElement => {
         </div>
 
         {/* Table */}
-        <div className="w-full overflow-x-auto">
+        <DataTable data={mockData} columns={columns} />
-          <table className="w-full min-w-full text-base">
-            <thead className="bg-primary-50 mb-3 text-left">
-              {table.getHeaderGroups().map((headerGroup) => (
-                <tr key={headerGroup.id}>
-                  {headerGroup.headers.map((header) => (
-                    <th
-                      key={header.id}
-                      className="py-3 px-5 font-normal first:rounded-l-lg last:rounded-r-lg"
-                    >
-                      {header.isPlaceholder
-                        ? null
-                        : flexRender(
-                            header.column.columnDef.header,
-                            header.getContext()
-                          )}
-                    </th>
-                  ))}
-                </tr>
-              ))}
-            </thead>
-            <tbody className="mt-3">
-              {table.getRowModel().rows.map((row) => (
-                <tr key={row.id} className="bg-primary-100 odd:bg-white">
-                  {row.getVisibleCells().map((cell, index) => (
-                    <td
-                      key={index}
-                      className="py-3 px-5 first:rounded-l-lg last:rounded-r-lg"
-                    >
-                      {flexRender(
-                        cell.column.columnDef.cell,
-                        cell.getContext()
-                      )}
-                    </td>
-                  ))}
-                </tr>
-              ))}
-            </tbody>
-          </table>
-        </div>
-        {/* <DataTable
-          data={currentItems}
-          headers={[
-            {
-              label: 'No.',
-              render: (_, index) => index + 1 + indexOfFirstItem,
-            },
-            { label: 'Nama Lengkap', key: 'name' },
-            { label: 'Email', key: 'email' },
-            { label: 'Nomor Telp', key: 'phone' },
-            { label: 'Alamat Pengiriman', key: 'address' },
-            {
-              label: 'Action',
-              render: (item: Account) => (
-                <Button
-                  variant="primary"
-                  size="sm"
-                  onClick={(e) => {
-                    e.stopPropagation();
-                    handleEdit(item.id);
-                  }}
-                  className="flex items-center gap-2"
-                >
-                  <EditOutlined /> Edit
-                </Button>
-              ),
-            },
-          ]}
-        /> */}
 
         {/* Pagination */}
         {/* <Pagination

libs/ui/src/molecules/index.ts

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

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

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

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

@@ -12,12 +12,8 @@ export const Pagination: FC<PaginationProps> = ({
   totalPages,
   onPageChange,
 }): ReactElement => {
-  // Generate page numbers to display
   const getPageNumbers = () => {
     const pages = [];
-    // const maxPagesToShow = 5;
-
-    // Always show first page
     if (currentPage > 3) {
       pages.push(1);
       if (currentPage > 4) {
@@ -25,7 +21,6 @@ export const Pagination: FC<PaginationProps> = ({
       }
     }
 
-    // Calculate range of pages to show around current page
     const startPage = Math.max(1, currentPage - 1);
     const endPage = Math.min(totalPages, currentPage + 1);
 
@@ -33,7 +28,6 @@ export const Pagination: FC<PaginationProps> = ({
       pages.push(i);
     }
 
-    // Always show last page
     if (currentPage < totalPages - 2) {
       if (currentPage < totalPages - 3) {
         pages.push('...');

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

@@ -1,52 +1,57 @@
-import { ReactElement, ReactNode } from 'react';
 import {
+  PaginationState,
   useReactTable,
   getCoreRowModel,
   getPaginationRowModel,
-  getFilteredRowModel,
+  flexRender,
+  ColumnDef,
 } from '@tanstack/react-table';
+import React from 'react';
 
 interface DataTableProps<T> {
   data: T[];
-  headers: {
+  columns: ColumnDef<T>[];
-    accessorKey?: keyof T;
+  pageSize?: number;
-    header: string;
-    cell?: (info: any) => ReactNode;
-  }[];
-  onRowClick?: (item: T) => void;
 }
 
-export const DataTable = <T extends Record<string, any>>({
+export const DataTable = <T,>({
   data,
-  headers,
+  columns,
-  onRowClick,
+  pageSize = 9,
-}: DataTableProps<T>): ReactElement => {
+}: DataTableProps<T>) => {
+  const [pagination, setPagination] = React.useState<PaginationState>({
+    pageIndex: 0,
+    pageSize,
+  });
+
   const table = useReactTable({
     data,
-    columns: headers.map((header) => ({
+    columns,
-      accessorKey: header.accessorKey,
+    state: {
-      header: header.header,
+      pagination,
-      cell: header.cell,
+    },
-    })),
     getCoreRowModel: getCoreRowModel(),
     getPaginationRowModel: getPaginationRowModel(),
-    getFilteredRowModel: getFilteredRowModel(),
+    onPaginationChange: setPagination,
   });
+
   return (
     <div className="w-full overflow-x-auto">
       <table className="w-full min-w-full text-base">
-        <thead className="bg-primary-50 mb-3">
+        <thead className="bg-primary-50 mb-3 text-left">
           {table.getHeaderGroups().map((headerGroup) => (
             <tr key={headerGroup.id}>
               {headerGroup.headers.map((header) => (
-                <th key={header.id}>
+                <th
-                  {header.isPlaceholder ? null : (
+                  key={header.id}
-                    <div>
+                  className="py-3 px-5 font-normal first:rounded-l-lg last:rounded-r-lg"
-                      {typeof header.column.columnDef.header === 'function'
+                >
-                        ? header.column.columnDef.header(header.getContext())
+                  {header.isPlaceholder
-                        : header.column.columnDef.header}
+                    ? null
-                    </div>
+                    : flexRender(
-                  )}
+                        header.column.columnDef.header,
+                        header.getContext()
+                      )}
                 </th>
               ))}
             </tr>
@@ -54,43 +59,19 @@ export const DataTable = <T extends Record<string, any>>({
         </thead>
         <tbody className="mt-3">
           {table.getRowModel().rows.map((row) => (
-            <tr
+            <tr key={row.id} className="bg-primary-100 odd:bg-white">
-              key={row.id}
+              {row.getVisibleCells().map((cell, index) => (
-              onClick={() => onRowClick && onRowClick(row.original)}
+                <td
-            >
+                  key={cell.id}
-              {row.getVisibleCells().map((cell) => (
+                  className="py-3 px-5 first:rounded-l-lg last:rounded-r-lg"
-                <td key={cell.id}>{cell.getValue() as ReactNode}</td>
+                >
+                  {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                </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>
   );
 };