Grid Header Menu

ProNew

A column header with a menu to sort ascending or descending, clear the sort, pin to either edge, autosize and hide the column.

Customize

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

Use it when columns need more than click-to-sort: pinning, hiding and sizing. Pass it to GridView through renderHeader.


pnpm dlx shadcn@latest add @tealmac-pro/grid-header-menu

Prop	Type	Description
`column`	`GridColumn<T>`	The column the menu belongs to.
`sort / onSortChange`	`SortSpec[]`	Current sort and its setter.
`onPinChange`	`(id, side?) => void`	Adds the pin items. side is undefined to unpin.
`onHide`	`(id) => void`	Adds Hide column.
`onAutosize`	`(id) => void`	Adds Autosize column.

The menu button is named "<column> column menu" and opens a standard menu: arrow keys move, Enter selects, Escape closes and returns focus.
Items that do not apply (Sort ascending when it is already ascending) are disabled, not removed, so the menu keeps its shape.

Guide and examples

Use it when columns need more than click-to-sort: pinning, hiding and sizing. Pass it to GridView through renderHeader.


pnpm dlx shadcn@latest add @tealmac-pro/grid-header-menu

Prop	Type	Description
`column`	`GridColumn<T>`	The column the menu belongs to.
`sort / onSortChange`	`SortSpec[]`	Current sort and its setter.
`onPinChange`	`(id, side?) => void`	Adds the pin items. side is undefined to unpin.
`onHide`	`(id) => void`	Adds Hide column.
`onAutosize`	`(id) => void`	Adds Autosize column.

The menu button is named "<column> column menu" and opens a standard menu: arrow keys move, Enter selects, Escape closes and returns focus.
Items that do not apply (Sort ascending when it is already ascending) are disabled, not removed, so the menu keeps its shape.