Grid Column Resizer

ProNew

A drag handle and keyboard separator for resizing a column: arrow keys, Shift for bigger steps, Home and End for the limits, double click to reset.

Customize

This item has no props to tune. Use the lens above to change theme, density, direction and more.

Use it inside header cells when people need to widen a column to read long values. Keep a minimum width so a column never disappears.


pnpm dlx shadcn@latest add @tealmac-pro/grid-column-resizer

Prop	Type	Description
`label`	`string`	Column name, used in the accessible label.
`width`	`number`	Current width in px.
`onResize`	`(width) => void`	Called while dragging and on key presses.
`min / max`	`number`	Limits. Defaults 60 and 600.

It is a focusable separator with aria-valuenow, aria-valuemin and aria-valuemax.
Left and right arrows resize by 10 px, 50 px with Shift (mirrored in right to left); Home and End jump to the limits.
Pointer capture keeps the drag going when the pointer leaves the handle.

Guide and examples

Use it inside header cells when people need to widen a column to read long values. Keep a minimum width so a column never disappears.


pnpm dlx shadcn@latest add @tealmac-pro/grid-column-resizer

Prop	Type	Description
`label`	`string`	Column name, used in the accessible label.
`width`	`number`	Current width in px.
`onResize`	`(width) => void`	Called while dragging and on key presses.
`min / max`	`number`	Limits. Defaults 60 and 600.

It is a focusable separator with aria-valuenow, aria-valuemin and aria-valuemax.
Left and right arrows resize by 10 px, 50 px with Shift (mirrored in right to left); Home and End jump to the limits.
Pointer capture keeps the drag going when the pointer leaves the handle.