Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Table with Vertical Lines
A React table with vertical border lines between columns using border-r for clear column separation and grid-like appearance
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Sometimes horizontal lines are not enough—dense data needs column boundaries too. This React table adds border-r vertical lines between columns. Built with shadcn/ui Table components and Tailwind border utilities, the grid structure clarifies column alignment—perfect for financial tables, data comparisons, project tracking, spreadsheet-like displays, or any table where vertical column separation helps users scan across rows without losing their place and column boundaries reduce confusion in wide tables.
| Project | Status | Priority | Assignee |
|---|---|---|---|
| Website Redesign | In Progress | High | John Doe |
| Mobile App | Planning | Medium | Jane Smith |
| API Integration | Completed | High | Bob Johnson |
| Database Migration | In Progress | Critical | Alice Williams |
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Dense Table
Compact table with reduced padding
Basic Table
Table without vertical lines
Compatibility Table
Table with icon indicators
Sortable Table
Table with sorting controls
Vertical Table
Key-value pair table
Data Grid
Advanced data grid