Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Table examples · Advanced

Vertical Table for React

A two-column table listing a profile's fields and their values.

Framework
UI library

One record shown as rows of label and value: name, email, phone, location, join date and role. The label column takes a third of the width and is set in medium weight. Use it for detail views, profile pages and order summaries, where a single record reads better down than across.

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 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.

All 8 table examples