Column selection

Letting the user select whole columns with selectable.columns.

Last updated August 3, 2026

selectable.columns takes false, "single", or "multiple" — off by default, since selection claims the click a display-only grid shouldn't. A column click replaces the selection, Ctrl-click toggles one column in or out, and Shift-click takes every column between the last click and this one.

Multi-select columns

selectable={{ columns: "multiple" }}

Live example

Id	Service	Environment Name	Environment Region	Status	Cost
1	checkout-api	production	us-east-1	healthy	1240.5
2	billing-worker	production	eu-west-1	degraded	860.2
3	search-index	staging	us-east-1	healthy	92.75
4	notifications	production	us-west-2	down	305.4
5	analytics-pipeline	staging	eu-west-1	healthy	145

Interact with the grid above to see its callbacks fire.

<DataGridComponent
  columns={columns}
  dataSource={rows}
  selectable={{ columns: "multiple" }}
  onColumnSelectionChange={({ selected }) => persist(selected)}
/>;

Props

Prop	Type	Default	Description
`selectable.columns`	`false \| "single" \| "multiple"`	`false`	How many columns the user may select at once.
`defaultColumnSelection`	`SelectionState`		Column ids selected to start with. Uncontrolled.
`onColumnSelect / onColumnsSelect`	`(event) => void`		Once per column newly selected, and once per interaction with every column it selected.
`onColumnDeselect / onColumnsDeselect`	`(event) => void`		The deselecting counterpart of each, above.
`onColumnSelectionChange`	`(event: ColumnSelectionChangeEvent) => void`		Once per change with what it added, what it removed, and everything selected after — the one to persist from.

Edit this page on GitHub