Column Resizing
Drag a column's right edge to resize it; double-click to reset back to its default width.
Installation
Column resizing ships with Data Table — no separate install.
Works with:Data Table
npx shadcn@latest add @kotsas-ui/data-tableUsage
Every field built with defineColumns is resizable by default — hover a header's right edge for the drag handle.
Set up CI pipeline | High | Done | $2,400.00 | True |
Design onboarding flow | Medium | In progress | $3,200.00 | False |
Migrate auth to OAuth2 | Urgent | In progress | $5,600.00 | False |
Write API docs | Low | To do | $900.00 | False |
Examples
Set a starting width with size, or lock a column with enableResizing: false:
// Set a starting width, or lock a column's width entirely.
col.currency("budget", { size: 160 })
col.text("id", { enableResizing: false })API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| enableResizing? | boolean | true | Per-column option on every col.* method. When false, the header renders no drag handle. |
| size? | number | 150 | Starting width in px. Double-clicking a column's drag handle resets back to this. |