DataGridColumnHeader

Interactive column header for a DataGrid: click to cycle sorting, or open the dropdown to sort, pin, move, and toggle column visibility. Reads DataGrid context, so it must render inside a DataGrid provider.

Usage

import { DataGridColumnHeader, DataGridColumnHeaderProps } from "@desk/ui/components/data-grid-column-header";

Best practices

Render inside a DataGrid — it calls useDataGrid() and throws outside the provider; use it as a column def's header, not standalone.
The pin/move/visibility controls only appear when the matching tableLayout flags (columnsPinnable/columnsMovable/columnsVisibility) are enabled on DataGrid — a missing menu item usually means the flag is off, not a bug.
Pass a human title (and optional icon); it is the accessible label for the sort/menu trigger and the moved-column announcement.

Props

Prop	Type	Default	Description
column(required)	`Column<TData, TValue>`		The TanStack Table column this header sorts, pins, moves, and toggles.
filter	`ReactNode`		Filter control rendered at the top of the header dropdown menu.
icon	`ReactNode`
pinnable	`boolean`
title	`string`		Header label text.
visibility	`boolean`	`false`	Expose the column-visibility submenu in the header dropdown.

Also exports

interfaceDataGridColumnHeaderProps

Composition

Builds on

Button, DataGrid, DropdownMenu