Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Table examples · Standard

Basic Table for React

A bordered table of users with their email, location, status and balance.

Framework
UI library

The plain Table: a header row of labels and one row per person, inside a bordered frame. TableHeader, TableBody, TableRow, TableHead and TableCell render the native table elements, so the rows and columns are announced as a table. The balance column is aligned to the trailing edge so the amounts line up. Start here for user lists, account summaries and any read-only list of records.

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

Which parts make up this table?

Table renders the <table>. TableHeader holds the label row, TableBody holds the records, and each person is a TableRow of TableCells. The demo maps the users array into four rows.

How is the balance column aligned?

text-end on the Balance TableHead and on each balance TableCell lines the amounts up on the trailing edge. Name, email, location and status stay at the start.

Why is the name medium weight?

font-medium on the name TableCell makes the person the row's label. Every cell inherits the table's text-sm.

What is the row key?

Each TableRow uses user.email as its key. The emails in this array are unique, so a row keeps its identity when the list renders again.

Where do the border and the scrolling come from?

The outer div is max-w-4xl rounded-md border bg-background. Table adds its own container with overflow-x-auto, and cells are whitespace-nowrap, so the five columns scroll sideways when the frame is narrow.

Do the rows have dividers and a hover state?

Yes. TableRow draws a bottom border and hover:bg-muted/50. TableHeader separates the labels, and the last body row drops its border.

All 8 table examples