A styled HTML table system (table, head, body, row, cell, footer) that supports dense layouts, selected rows, and per-cell text alignment, with cells automatically rendering as th or td based on context.
import Table, {
TableBody,
TableCell,
TableHead,
TableRow,
} from "@/components/ui/table";
const users = [
{
name: "Olivia Martin",
email: "olivia@example.com",
role: "Admin",
status: "Active",
joined: "Jan 12, 2025",
},
{
name: "Jackson Lee",
email: "jackson@example.com",
role: "Member",
status: "Active",
joined: "Feb 08, 2025",
},
{
name: "Sophia Brown",
email: "sophia@example.com",
role: "Member",
status: "Inactive",
joined: "Mar 21, 2025",
},
];
export default function TableBasicDemo() {
return (
<div className="w-full overflow-x-auto">
<Table className="min-w-200">
<TableHead>
<TableRow>
<TableCell>Name</TableCell>
<TableCell>Email</TableCell>
<TableCell>Role</TableCell>
<TableCell>Status</TableCell>
<TableCell>Joined</TableCell>
</TableRow>
</TableHead>
<TableBody>
{users.map((user) => (
<TableRow key={user.email}>
<TableCell>{user.name}</TableCell>
<TableCell>{user.email}</TableCell>
<TableCell>{user.role}</TableCell>
<TableCell>{user.status}</TableCell>
<TableCell>{user.joined}</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</div>
);
}
Loading preview...
Loading preview...