Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Table examples · Standard

Striped Table for React

A table of transactions with every other row shaded.

Framework
UI library

Five transactions with bg-muted/50 on every other row, picked from the row's index. The shading helps the eye follow a row across the columns when the list is long, as in statements, ledgers and logs. The amounts are aligned to the trailing edge.

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 do the stripes get onto the rows?

In the map, index % 2 === 0 adds bg-muted/50 to that TableRow. The other rows pass an empty class. Index 0 is the first data row, so it is shaded.

Can Table stripe the rows for me?

This table has no stripe prop. Shade a TableRow yourself, as this demo does with bg-muted/50 when index % 2 === 0. even:bg-muted/30 on TableRow is the other class that shades every other row.

How is the amount aligned?

text-end on the Amount TableHead and on each amount TableCell lines the figures up on the trailing edge. The id cell is font-medium.

What identifies a transaction row?

transaction.id is the key, values such as TXN-001. The stripe uses the map index, so the shading follows the current order of transactions.

Do striped rows still highlight on hover?

TableRow includes hover:bg-muted/50. On a shaded row that is the same fill, so the hover shows on the unshaded rows.

What draws the box around the table?

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

All 8 table examples