Shadcn.io is not affiliated with official shadcn/ui
Resizable Columns
A React data table with resizable columns using TanStack Table columnResizeMode and drag handles for dynamic width adjustment
Fixed column widths frustrate users—resizable columns adapt to content needs. This React data table uses TanStack Table's columnResizeMode onChange with getResizeHandler on column edges creating cursor-col-resize drag handles. Built with shadcn/ui Table components featuring bg-border opacity-0 hover-opacity-100 resize indicators and bg-primary when resizing. The resizable pattern improves flexibility—perfect for employee directories, financial reports, wide datasets, or anywhere users need to adjust column widths optimizing for their specific content and screen size.
Resizable Columns preview
Installation
Related Components
Basic Data Table
Simple table with checkboxes
Column Visibility
Toggle column visibility
Expandable Rows
Nested sub-row expansion
Table with Filters
Column filtering inputs
Table with Actions
Row action dropdown
Paginated Table
Page navigation controls
FAQ
Was this page helpful?
Sign in to leave feedback.
Numeric Pagination
A React data table with numeric page buttons using TanStack Table getPaginationRowModel showing clickable page numbers with ellipsis
Data Table with Actions
A React data table with row action dropdown menus using TanStack Table and shadcn/ui DropdownMenu with MoreHorizontal trigger icon