54 lines
1.8 KiB
JavaScript
54 lines
1.8 KiB
JavaScript
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>
|
|
);
|
|
} |