Shadcn.io is not affiliated with official shadcn/ui
Table with Vertical Lines
A React table with vertical border lines between columns using border-r for clear column separation and grid-like appearance
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.
Table with Vertical Lines preview
Installation
Related Components
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
FAQ
Was this page helpful?
Sign in to leave feedback.