shadcn.io is an independent project built on shadcn/ui
A table of projects with a vertical line between the columns. The heads are Project, Status, Priority and Assignee. Website Redesign is first, In Progress, High, assigned to John Doe.
Use vertical lines when columns are easy to mix up, such as status and priority. Stripes on a plain Table are the other way to hold a row together. On React, Ark UI does not draw those lines.
Installation
Anatomy
Usage
<div className="w-full max-w-4xl rounded-md border bg-background">
<Table>
<TableHeader>
<TableRow>
<TableHead className="border-e">Project</TableHead>
<TableHead className="border-e">Status</TableHead>
<TableHead className="border-e">Priority</TableHead>
<TableHead>Assignee</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{projects.map((project) => (
<TableRow key={project.name}>
<TableCell className="border-e font-medium">
{project.name}
</TableCell>
<TableCell className="border-e">{project.status}</TableCell>
<TableCell className="border-e">{project.priority}</TableCell>
<TableCell>{project.assignee}</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</div>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.
API Reference
Table
No extra props in this demo. The rest is on the Table page.
