# Vertical table with employee profile details

> Vertical table with employee profile details

A shadcn/ui block from the [@reui](https://reui.io) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/reui/c-table-16).

- Page, with a live preview: https://shadcn.exchange/r/reui/c-table-16
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/reui/c-table-16-light-2126e7812adc0980.png
- Registry item: https://reui.io/r/new-york-v4/c-table-16.json
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://reui.io/r/new-york-v4/c-table-16.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- Registry items: `avatar`, `@reui/badge`, `table`

## Files

### `c-table-16.tsx`

```tsx
import { Badge } from "@/components/reui/badge"

import {
  Avatar,
  AvatarFallback,
  AvatarImage,
} from "@/components/ui/avatar"
import {
  Table,
  TableBody,
  TableCell,
  TableRow,
} from "@/components/ui/table"

export function Pattern() {
  return (
    <div className="mx-auto flex w-full max-w-lg flex-col">
      <div className="bg-background overflow-hidden rounded-lg border">
        <Table>
          <TableBody>
            <TableRow className="*:border-border hover:bg-transparent [&>:not(:last-child)]:border-r">
              <TableCell className="bg-muted/50 w-40 py-2 text-sm font-medium">
                Employee
              </TableCell>
              <TableCell className="py-2">
                <div className="flex items-center gap-2">
                  <Avatar size="sm">
                    <AvatarImage
                      src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=96&h=96&dpr=2&q=80"
                      alt="Sarah Chen"
                    />
                    <AvatarFallback>SC</AvatarFallback>
                  </Avatar>
                  <div className="flex flex-col leading-none">
                    <span className="text-sm font-medium">Sarah Chen</span>
                    <span className="text-muted-foreground text-xs">
                      Lead Product Designer
                    </span>
                  </div>
                </div>
              </TableCell>
            </TableRow>
            <TableRow className="*:border-border hover:bg-transparent [&>:not(:last-child)]:border-r">
              <TableCell className="bg-muted/50 py-2 text-sm font-medium">
                Department
              </TableCell>
              <TableCell className="py-2 text-sm">
                Design & User Experience
              </TableCell>
            </TableRow>
            <TableRow className="*:border-border hover:bg-transparent [&>:not(:last-child)]:border-r">
              <TableCell className="bg-muted/50 py-2 text-sm font-medium">
                Email
              </TableCell>
              <TableCell className="text-primary py-2 text-sm">
                sarah.chen@acmecorp.com
              </TableCell>
            </TableRow>
            <TableRow className="*:border-border hover:bg-transparent [&>:not(:last-child)]:border-r">
              <TableCell className="bg-muted/50 py-2 text-sm font-medium">
                Location
              </TableCell>
              <TableCell className="py-2 text-sm">San Francisco, CA</TableCell>
            </TableRow>
            <TableRow className="*:border-border hover:bg-transparent [&>:not(:last-child)]:border-r">
              <TableCell className="bg-muted/50 py-2 text-sm font-medium">
                Status
              </TableCell>
              <TableCell className="py-2">
                <Badge variant="success-light" size="sm">
                  Active
                </Badge>
              </TableCell>
            </TableRow>
            <TableRow className="*:border-border hover:bg-transparent [&>:not(:last-child)]:border-r">
              <TableCell className="bg-muted/50 py-2 text-sm font-medium">
                Start Date
              </TableCell>
              <TableCell className="py-2 text-sm">March 15, 2022</TableCell>
            </TableRow>
            <TableRow className="*:border-border hover:bg-transparent [&>:not(:last-child)]:border-r">
              <TableCell className="bg-muted/50 py-2 text-sm font-medium">
                Reports To
              </TableCell>
              <TableCell className="py-2 text-sm">
                James Rodriguez, VP of Design
              </TableCell>
            </TableRow>
          </TableBody>
        </Table>
      </div>
    </div>
  )
}
```