# With vertical lines

> Column grid lines via per-cell right borders.

A shadcn/ui block from the [@flx](https://ui.flexnative.com) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/flx/table-05).

- Page, with a live preview: https://shadcn.exchange/r/flx/table-05
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/flx/table-05-light-9a7e9d15de36d12c.png
- Registry item: https://ui.flexnative.com/r/table-05.json
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://ui.flexnative.com/r/table-05.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- Registry items: `table`

## Files

### `registry/patterns/table/table-05.tsx`

```tsx
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from '@/components/ui/table'

const usage = [
  { plan: 'Starter', seats: '1–5', storage: '10 GB', price: '$0' },
  { plan: 'Pro', seats: '6–20', storage: '100 GB', price: '$29' },
  { plan: 'Business', seats: '21–50', storage: '1 TB', price: '$99' },
  {
    plan: 'Enterprise',
    seats: 'Unlimited',
    storage: 'Custom',
    price: 'Contact',
  },
]

export function Table05() {
  return (
    <div className="w-full max-w-xl">
      <div className="overflow-hidden rounded-lg border">
        <Table className="[&_td]:border-r [&_td:last-child]:border-r-0 [&_th]:border-r [&_th:last-child]:border-r-0">
          <TableHeader>
            <TableRow>
              <TableHead>Plan</TableHead>
              <TableHead>Seats</TableHead>
              <TableHead>Storage</TableHead>
              <TableHead className="text-right">Price</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {usage.map((row) => (
              <TableRow key={row.plan}>
                <TableCell className="font-medium">{row.plan}</TableCell>
                <TableCell className="text-muted-foreground">
                  {row.seats}
                </TableCell>
                <TableCell className="text-muted-foreground">
                  {row.storage}
                </TableCell>
                <TableCell className="text-right tabular-nums">
                  {row.price}
                </TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
      </div>
    </div>
  )
}
```