Spaces:
Running
Running
File size: 2,973 Bytes
b967c2c |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 |
import React, { useState, useEffect } from 'react';
import { Table, TableHeader, TableBody, TableHead, TableRow, TableCell, TableCaption } from './ui/table';
import { Button } from './ui/button';
const DataTable = () => {
const [data, setData] = useState([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
// Mock data for demonstration - replace with actual MongoDB data
const mockData = [
{ id: 1, name: 'John Doe', email: 'john@example.com', role: 'Developer' },
{ id: 2, name: 'Jane Smith', email: 'jane@example.com', role: 'Designer' },
{ id: 3, name: 'Bob Johnson', email: 'bob@example.com', role: 'Manager' },
{ id: 4, name: 'Alice Brown', email: 'alice@example.com', role: 'Developer' },
{ id: 5, name: 'Charlie Wilson', email: 'charlie@example.com', role: 'Designer' },
];
useEffect(() => {
// Simulate loading data
setTimeout(() => {
setData(mockData);
setLoading(false);
}, 1000);
}, []);
const fetchFromMongoDB = async () => {
try {
setLoading(true);
// Replace this with your actual MongoDB connection logic
// const response = await fetch('/api/data');
// const result = await response.json();
// setData(result);
// For now, using mock data
setData(mockData);
} catch (err) {
setError('Failed to fetch data');
} finally {
setLoading(false);
}
};
if (loading) {
return (
<div className="flex items-center justify-center p-8">
<div className="text-lg text-muted-foreground">Loading...</div>
</div>
);
}
if (error) {
return (
<div className="flex items-center justify-center p-8">
<div className="text-red-500">{error}</div>
</div>
);
}
return (
<div className="w-full max-w-4xl mx-auto p-6">
<div className="flex justify-between items-center mb-6">
<h2 className="text-2xl font-bold text-foreground">User Data</h2>
<Button onClick={fetchFromMongoDB}>
Refresh Data
</Button>
</div>
<div className="border rounded-lg bg-card">
<Table>
<TableCaption>A list of users from the database.</TableCaption>
<TableHeader>
<TableRow>
<TableHead>ID</TableHead>
<TableHead>Name</TableHead>
<TableHead>Email</TableHead>
<TableHead>Role</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{data.map((user) => (
<TableRow key={user.id}>
<TableCell className="font-medium">{user.id}</TableCell>
<TableCell>{user.name}</TableCell>
<TableCell>{user.email}</TableCell>
<TableCell>{user.role}</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</div>
</div>
);
};
export default DataTable;
|