Shadcn.io is not affiliated with official shadcn/ui
Tables Resizable
Drag column borders to resize table widths in React data grids using shadcn/ui and Tailwind CSS.
Customize column widths on your Next.js dashboard with this resizable table component. Features draggable column dividers with resize cursor, minimum column width constraints, visual resize handle on hover, live width updates during drag, and persistent column widths in state. Built with shadcn/ui Table component using Tailwind CSS and native mouse events. The flexible layout accommodates varying content lengths—perfect for data grids, spreadsheet interfaces, report builders, or any React app where users need custom column sizing.
Related Components
Column Visibility Table
Show/hide columns dynamically
Sortable Table
Sort with custom widths
Sticky Header Table
Fixed header while resizing
Density Toggle Table
Adjust row height
Export Table
Export with column layout
Pinned Columns Table
Pin resized columns
FAQ
Was this page helpful?
Sign in to leave feedback.