Skip to content

shadcn.io is an independent project built on shadcn/ui

Free

Vertical Table for React

A two-column profile table, Field and Value. Rows run from Full Name John Doe through Role Administrator.

A two-column table headed Field and Value. The rows are Full Name, Email, Phone, Location, Joined and Role. Full Name is John Doe. Role is Administrator.

Use two columns for one record, such as a profile. A Data List is the same idea without a table grid. Base UI in React does not pair the labels with the values.

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

Anatomy

Table anatomy: header, head, row, cell, footer, caption

Usage

<div className="w-full max-w-md rounded-md border bg-background">
  <Table>
    <TableHeader>
      <TableRow>
        <TableHead className="w-1/3">Field</TableHead>
        <TableHead>Value</TableHead>
      </TableRow>
    </TableHeader>
    <TableBody>
      {userInfo.map((info) => (
        <TableRow key={info.label}>
          <TableCell className="font-medium">{info.label}</TableCell>
          <TableCell>{info.value}</TableCell>
        </TableRow>
      ))}
    </TableBody>
  </Table>
</div>

FAQ

How is this table organized?

Two columns, Field and Value. userInfo has six pairs, and each pair is a TableRow keyed by info.label. The label cell is font-medium. The value cell is plain text.

How wide is the field column?

The Field TableHead has w-1/3, so the labels take a third of the table and the values take the rest. The frame is max-w-md.

Which fields are shown?

Full Name, Email, Phone, Location, Joined and Role, in that order, from the userInfo array.

Do the rows still have dividers?

Yes. This file does not set border-b-0. TableRow keeps its bottom border and hover:bg-muted/50, and TableHeader separates the Field and Value labels.

Does this table scroll sideways?

Table still sits in a container with overflow-x-auto. At max-w-md the two columns usually fit, and the container scrolls if a value is wider than the frame.

How do I add another field?

Push another { label, value } onto userInfo. The map renders a TableRow with the label in the font-medium cell and the value beside it.

API Reference

Table

No extra props in this demo. The rest is on the Table page.

All 8 table examples