ok

src/components/EntriesTable.js

@@ -0,0 +1,54 @@
+import React, { useEffect, useState } from 'react';
+import { fetchEntries } from '../api';
+
+export default function EntriesTable({ dataTypeId }) {
+    const [entries, setEntries] = useState([]);
+    const [loading, setLoading] = useState(true);
+
+    useEffect(() => {
+        const loadEntries = async () => {
+            try {
+                const result = await fetchEntries(dataTypeId);
+                setEntries(result);
+            } catch (error) {
+                console.error("Error fetching entries:", error);
+            } finally {
+                setLoading(false);
+            }
+        };
+        loadEntries();
+    }, [dataTypeId]);
+
+    if (loading) return <div>Loading...</div>;
+    if (!entries.length) return <div>No entries found.</div>;
+
+    // Ambil header kolom dari key properti data entry pertama
+    const headers = Object.keys(entries[0].data || {});
+
+    return (
+        <div className="overflow-x-auto">
+            <table className="min-w-full border-collapse">
+                <thead>
+                    <tr>
+                        {headers.map((header) => (
+                            <th key={header} className="border px-4 py-2 bg-gray-200">
+                                {header}
+                            </th>
+                        ))}
+                    </tr>
+                </thead>
+                <tbody>
+                    {entries.map((entry) => (
+                        <tr key={entry.data_id}>
+                            {headers.map((header) => (
+                                <td key={header} className="border px-4 py-2">
+                                    {entry.data[header]}
+                                </td>
+                            ))}
+                        </tr>
+                    ))}
+                </tbody>
+            </table>
+        </div>
+    );
+}