shadcn.io is an independent project built on shadcn/ui
A table of team members. The columns are User, Email and Role. Each name has an avatar beside it. Hayden Bleasel is first, as Product Designer.
Put an avatar in the name cell for a people directory. A list of Item rows fits the same people if you do not need columns. Ark UI in Vue does not load the pictures.
Installation
Anatomy
Usage
<div class="w-full max-w-4xl rounded-md border bg-background">
<Table>
<TableHeader>
<TableRow>
<TableHead>User</TableHead>
<TableHead>Email</TableHead>
<TableHead>Role</TableHead>
</TableRow>
</TableHeader>
<TableBody>
<TableRow v-for="user in users" :key="user.email">
<TableCell>
<div class="flex items-center gap-3">
<Avatar>
<AvatarImage :alt="user.name" :src="user.avatar" />
<AvatarFallback>{{ user.initials }}</AvatarFallback>
</Avatar>
<span class="font-medium">{{ user.name }}</span>
</div>
</TableCell>
<TableCell>{{ user.email }}</TableCell>
<TableCell>{{ user.role }}</TableCell>
</TableRow>
</TableBody>
</Table>
</div>FAQ
How are the avatar and the name laid out?
The User TableCell holds a div with flex items-center gap-3. Avatar comes first, then a span with font-medium around user.name.
What does Avatar render in this cell?
AvatarImage gets src={user.avatar} and alt={user.name}. AvatarFallback shows user.initials, such as HB, when the image is not available. There is no size prop, so the Avatar stays the default size-8.
Why do the emails look masked?
The table prints user.email as plain text. The masking is already in the data, for example h****n@vercel.com.
Which columns are in this table?
User, Email and Role. Email and role are plain TableCells. The row key is user.email.
API Reference
Table
Sets v-for="user in users" and key="user.email". The rest is on the Table page.
Avatar
Sets alt="user.name" and src="user.avatar". The rest is on the Avatar page.
