feat: Change data table component dynamically

- Ubah komponen DataTable agar bisa render menyesuaikan jumlah kolom dan baris pada data
2025-03-27 17:22:04 +07:00
parent 43167fe7a1
commit 6bfa48bed8
3 changed files with 187 additions and 64 deletions
@@ -1,11 +1,24 @@
 import { FC, ReactElement, useState } from 'react';
-import { FilterOutlined, SearchOutlined } from '@ant-design/icons';
+import {
+  FilterOutlined,
+  SearchOutlined,
+  EditOutlined,
+} 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';

+// Define account interface
+interface Account {
+  id: number;
+  name: string;
+  email: string;
+  phone: string;
+  address: string;
+}
+
 // Mock data for demonstration
-const mockData = Array.from({ length: 20 }, (_, i) => ({
+const mockData: Account[] = Array.from({ length: 20 }, (_, i) => ({
  id: i + 1,
  name: i === 0 ? 'Ahmad Wijuana' : 'Nama Lengkap',
  email: 'Fullname23@gmail.com',
@@ -79,7 +92,35 @@ export const Components: FC = (): ReactElement => {
        </div>

        {/* Table */}
-        <DataTable data={currentItems} onEdit={handleEdit} />
+        <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
@@ -1,16 +1,34 @@
 import { FC, ReactElement, useState } from 'react';
-import { FilterOutlined, SearchOutlined } from '@ant-design/icons';
+import {
+  FilterOutlined,
+  SearchOutlined,
+  FileTextOutlined,
+} 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';

-// Mock data for demonstration
-const mockData = Array.from({ length: 20 }, (_, i) => ({
+// Define status type for better type safety
+type TransactionStatus = 'valid' | 'invalid' | 'unchecked';
+
+// Define transaction interface
+interface Transaction {
+  id: number;
+  name: string;
+  transactionNumber: string;
+  status: TransactionStatus;
+}
+
+// Mock data for transactions
+const mockTransactions: Transaction[] = Array.from({ length: 20 }, (_, i) => ({
  id: i + 1,
  name: i === 0 ? 'Ahmad Wijuana' : 'Nama Lengkap',
-  email: 'Fullname23@gmail.com',
-  phone: '081904423804',
-  address: 'Jl. Pantai Cibaduyut Indonesia',
+  transactionNumber: '25D2133Y9AFYBD',
+  status: (i % 3 === 0
+    ? 'invalid'
+    : i % 5 === 0
+    ? 'unchecked'
+    : 'valid') as TransactionStatus,
 }));

 export const Components: FC = (): ReactElement => {
@@ -19,10 +37,10 @@ export const Components: FC = (): ReactElement => {
  const itemsPerPage = 9;

  // Filter data based on search query
-  const filteredData = mockData.filter(
+  const filteredData = mockTransactions.filter(
    (item) =>
      item.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
-      item.email.toLowerCase().includes(searchQuery.toLowerCase())
+      item.transactionNumber.toLowerCase().includes(searchQuery.toLowerCase())
  );

  // Paginate data
@@ -30,9 +48,9 @@ export const Components: FC = (): ReactElement => {
  const indexOfFirstItem = indexOfLastItem - itemsPerPage;
  const currentItems = filteredData.slice(indexOfFirstItem, indexOfLastItem);

-  const handleEdit = (id: number) => {
-    console.log(`Edit item with id: ${id}`);
-    // Implement edit functionality
+  const handleValidate = (id: number) => {
+    console.log(`Validate transaction with id: ${id}`);
+    // Implement validation functionality
  };

  const handlePageChange = (pageNumber: number) => {
@@ -78,7 +96,57 @@ export const Components: FC = (): ReactElement => {
        </div>

        {/* Table */}
-        <DataTable data={currentItems} onEdit={handleEdit} />
+        <DataTable
+          data={currentItems}
+          headers={[
+            {
+              label: 'No.',
+              render: (_, index) => index + 1 + indexOfFirstItem,
+            },
+            { label: 'Nama Lengkap', key: 'name' },
+            { label: 'Nomor Transaksi', key: 'transactionNumber' },
+            {
+              label: 'Order Valid?',
+              render: (item: Transaction) => {
+                const statusColors: Record<TransactionStatus, string> = {
+                  valid: 'bg-success-500 text-white',
+                  invalid: 'bg-danger-500 text-white',
+                  unchecked: 'bg-yellow-400 text-black',
+                };
+                const statusText: Record<TransactionStatus, string> = {
+                  valid: 'Valid',
+                  invalid: 'Invalid',
+                  unchecked: 'Unchecked',
+                };
+                return (
+                  <div
+                    className={`py-1 px-3 rounded-md text-center ${
+                      statusColors[item.status]
+                    }`}
+                  >
+                    {statusText[item.status]}
+                  </div>
+                );
+              },
+            },
+            {
+              label: 'Action',
+              render: (item: Transaction) => (
+                <Button
+                  variant="primary"
+                  size="sm"
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    handleValidate(item.id);
+                  }}
+                  className="flex items-center gap-2"
+                >
+                  <FileTextOutlined /> Validate
+                </Button>
+              ),
+            },
+          ]}
+        />

        {/* Pagination */}
        <Pagination
@@ -1,66 +1,80 @@
-import { FC, ReactElement } from 'react';
-import { EditOutlined } from '@ant-design/icons';
-import { Button } from '../../atoms'; // Use relative import for Button
+import { FC, ReactElement, ReactNode } from 'react';

-interface DataTableProps {
-  data: Array<{
-    id: number;
-    name: string;
-    email: string;
-    phone: string;
-    address: string;
-  }>;
-  onEdit: (id: number) => void;
+interface DataTableProps<T> {
+  data: T[];
+  headers: {
+    label: string;
+    key?: keyof T;
+    render?: (item: T, index: number) => ReactNode;
+    className?: string;
+  }[];
+  showCheckbox?: boolean;
+  onRowClick?: (item: T) => void;
 }

-export const DataTable: FC<DataTableProps> = ({
+export const DataTable = <T extends Record<string, any>>({
  data,
-  onEdit,
-}): ReactElement => {
+  headers,
+  showCheckbox = true,
+  onRowClick,
+}: DataTableProps<T>): ReactElement => {
  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>
-            <th className="py-3 px-5 text-left font-normal rounded-l-lg">
-              <input type="checkbox" className="rounded" />
-            </th>
-            <th className="py-3 px-5 text-left font-normal">No.</th>
-            <th className="py-3 px-5 text-left font-normal">Nama Lengkap</th>
-            <th className="py-3 px-5 text-left font-normal">Email</th>
-            <th className="py-3 px-5 text-left font-normal">Nomor Telp</th>
-            <th className="py-3 px-5 text-left font-normal">
-              Alamat Pengiriman
-            </th>
-            <th className="py-3 px-5 text-left font-normal rounded-r-lg">
-              Action
-            </th>
+            {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}
+                </th>
+              );
+            })}
          </tr>
        </thead>
        <tbody className="mt-3">
-          {data.map((item, index) => (
+          {data.map((item, rowIndex) => (
            <tr
-              key={item.id}
-              className={index % 2 === 0 ? 'bg-white' : 'bg-primary-100'}
+              key={rowIndex}
+              className={rowIndex % 2 === 0 ? 'bg-white' : 'bg-primary-100'}
+              onClick={() => onRowClick && onRowClick(item)}
            >
-              <td className="py-3 px-5 rounded-l-lg">
-                <input type="checkbox" className="rounded" />
-              </td>
-              <td className="py-3 px-5">{index + 1}</td>
-              <td className="py-3 px-5">{item.name}</td>
-              <td className="py-3 px-5 truncate">{item.email}</td>
-              <td className="py-3 px-5">{item.phone}</td>
-              <td className="py-3 px-5 truncate">{item.address}</td>
-              <td className="py-3 px-5 rounded-r-lg">
-                <Button
-                  variant="primary"
-                  size="sm"
-                  onClick={() => onEdit(item.id)}
-                  className="flex items-center gap-2"
-                >
-                  <EditOutlined /> Edit
-                </Button>
-              </td>
+              {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>
+                );
+              })}
            </tr>
          ))}
        </tbody>