Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Table examples · Advanced

Table with Vertical Lines for React

A table of projects with vertical lines between the columns.

Framework
UI library

Four projects with border-e on every column but the last, so each column has a line on its trailing side and the frame keeps a single edge. The rows keep their horizontal dividers, which gives the table a grid. Use it for wide tables and spreadsheet-like views where the column boundaries matter.

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 cells get a vertical line?

Project, Status and Priority use border-e on both TableHead and TableCell. Assignee, the last column, has no border-e, so the line does not sit on the frame's edge.

What else is on the project name?

The project TableCell adds font-medium beside border-e. Status, priority and assignee stay at the regular weight.

What does a row contain?

projects has four records. Each TableRow is keyed by project.name and shows the name, status, priority and assignee.

Do the horizontal dividers stay?

Yes. border-e only paints the trailing edge. TableRow still has its bottom border and hover:bg-muted/50.

What is the box around the table?

The outer div is w-full max-w-4xl rounded-md border bg-background. Table scrolls sideways when the columns do not fit.

How do I add a column and keep a single edge?

Put border-e on the new TableHead and TableCell only when another column follows it. Leave the last column without border-e, the way Assignee is written here.

All 8 table examples