feat : DataTable with Sample init

client/src/components/DocumentTable/index.tsx

@@ -0,0 +1,29 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import type { PaymentType } from "@/types/paymentType";
+import { columns } from "@/components/ui/column";
+import { DataTable } from "@/components/ui/DataTable";
+
+async function getData(): Promise<PaymentType[]> {
+  const res = await fetch(
+    "https://my.api.mockaroo.com/payment_info.json?key=f0933e60"
+  );
+  if (!res.ok) {
+    throw new Error("Failed to fetch data");
+  }
+
+  return res.json();
+}
+
+export default function DocumentTable() {
+  const [paymentData, setPaymentData] = useState<PaymentType[]>([]);
+  useEffect(() => {
+    const data = async () => {
+      const result = await getData();
+      setPaymentData(result);
+    };
+    data();
+  }, []);
+  return <DataTable columns={columns} data={paymentData} />;
+}

client/src/components/ui/DataTable/index.tsx

@@ -64,7 +64,7 @@ export function DataTable<TData, TValue>({
   });
 
   return (
-    <div className="space-y-4">
+    <div className="space-y-8">
       <DataTableToolbar table={table} />
       <div className="rounded-md border">
         <Table>

client/src/template/DocumentListPage.tsx

@@ -5,6 +5,7 @@ import Link from "next/link";
 import API from "@/lib/api";
 import { Button } from "@/components/ui/button";
 import { Skeleton } from "@/components/ui/skeleton";
+import DocumentTable from "@/components/DocumentTable";
 
 interface Document {
   id?: string;
@@ -47,6 +48,8 @@ export default function DocumentListPage() {
   }, []);
 
   return (
-    <div className="min-h-screen flex flex-col items-center justify-center"></div>
+    <div className="min-h-screen flex flex-col items-center justify-center">
+      <DocumentTable />
+    </div>
   );
 }