A responsive table for listing users that renders a deterministic geometric avatar (blobatar) per row so similar names stay visually distinguishable.
import UserTable from "@/components/ui/user-table";
const users = [
{
id: "[email protected]",
name: "Satomi Nakamura",
email: "[email protected]",
role: "Engineering",
status: "active",
lastSeen: "2m ago",
},
{
id: "[email protected]",
name: "Sora Nakagawa",
email: "[email protected]",
role: "Design",
status: "invited",
lastSeen: "1h ago",
},
{
id: "[email protected]",
name: "Jide Oyelaran",
email: "[email protected]",
role: "Support",
status: "active",
lastSeen: "3d ago",
},
{
id: "[email protected]",
name: "Mateo Alvarado",
email: "[email protected]",
role: "Sales",
status: "suspended",
lastSeen: "2w ago",
},
];
export default function UserTableDemo() {
return (
<div className="w-full max-w-2xl">
<UserTable users={users} caption="Team members" />
</div>
);
}