Skip to content

shadcn.io is an independent project built on shadcn/ui

Free

Table with Vertical Lines for Vue

A project table with vertical lines between Project, Status, Priority and Assignee. Website Redesign is first, In Progress, High.

UI library: Ark 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 Vue, Ark UI does not draw those lines.

Preview

Preview width

Installation

MCP · Pro
Make your AI a shadcn expert
Your agent installs components, builds pages and restyles your app from one prompt, in Claude Code, Cursor or VS Code.
Get MCPSee plans
Part of Pro

Anatomy

Table anatomy: header, head, row, cell, footer, caption

Usage

<div class="w-full max-w-4xl rounded-md border bg-background">
  <Table>
    <TableHeader>
      <TableRow>
        <TableHead class="border-e">Project</TableHead>
        <TableHead class="border-e">Status</TableHead>
        <TableHead class="border-e">Priority</TableHead>
        <TableHead>Assignee</TableHead>
      </TableRow>
    </TableHeader>
    <TableBody>
      <TableRow v-for="project in projects" :key="project.name">
        <TableCell class="border-e font-medium">{{ project.name }}</TableCell>
        <TableCell class="border-e">{{ project.status }}</TableCell>
        <TableCell class="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.

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.

API Reference

Table

Sets v-for="project in projects" and key="project.name". The rest is on the Table page.

All 8 table examples