Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Table Block Resizable Columns
Table component with draggable column resizers for adjustable column widths in React data grids
Looking to implement shadcn/ui blocks?
Join our Discord community for help from other developers.
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.
Drag column borders to resize. Total width: 800px
| ID | File Name | Type | Size | Owner | Modified | Status |
|---|---|---|---|---|---|---|
| AST-001 | Q4 Financial Report.pdf | 2.4 MB | Finance Team | 2024-01-15 | Active | |
| AST-002 | Product Roadmap 2024.xlsx | Spreadsheet | 856 KB | Product Team | 2024-01-14 | Active |
| AST-003 | Brand Guidelines v3.pdf | 15.2 MB | Design Team | 2024-01-12 | Active | |
| AST-004 | Customer Survey Results.csv | CSV | 124 KB | Marketing | 2024-01-10 | Processing |
| AST-005 | Old Marketing Materials.zip | Archive | 245 MB | Marketing | 2023-12-20 | Archived |
| AST-006 | Employee Handbook.docx | Document | 1.8 MB | HR Team | 2024-01-08 | Active |
Installation
Related blocks you will also like
Table with Column Visibility
Show/hide columns dynamically
Table with Sortable Columns
Sort with custom widths
Table with Sticky Header
Fixed header while resizing
Table with Density Toggle
Adjust row height
Table with Export Options
Export with column layout
Table with Pinned Columns
Pin resized columns
Questions you might have
React Table Block Star Ratings
Table component with inline star ratings and review scores for React product and review dashboards
React Table Block Restaurant Menu
Table component with restaurant menu showing dishes, descriptions, dietary tags, prices and availability for React food ordering interfaces