Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Table examples · Standard

Table with Avatar for React

A table of team members with an avatar beside each name.

Framework
UI library

Each row starts with an Avatar and the person's name, then their email and role. The avatar shows a GitHub picture and falls back to initials when the picture can't load. Use it for team rosters, member lists and customer directories, where a face makes a name easier to find.

Preview

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

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.

When do the initials show?

AvatarFallback is the second child of Avatar. It shows the initials when AvatarImage has no picture to display. The alt on the image is the person's name.

What wraps the table?

A div with max-w-4xl rounded-md border bg-background. Table scrolls sideways in its container when the three columns do not fit.

All 8 table examples