Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Data Table - Resizable Columns
A React data table with resizable columns using TanStack Table columnResizeMode and drag handles for dynamic width adjustment
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
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.
| Name | Department | Position | Salary | |
|---|---|---|---|---|
John Doe | Engineering | Senior Developer | $120,000 | |
Jane Smith | Design | Product Designer | $95,000 | |
Bob Johnson | Marketing | Marketing Manager | $85,000 | |
Alice Williams | Engineering | Tech Lead | $145,000 |
Drag column edges to resize
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
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
Questions you might have
React Data Table - Numeric Pagination
A React data table with numeric page buttons using TanStack Table getPaginationRowModel showing clickable page numbers with ellipsis
React Data Table with Actions
A React data table with row action dropdown menus using TanStack Table and shadcn/ui DropdownMenu with MoreHorizontal trigger icon