---
title: GridSelectionColumn
description: GridSelectionColumn
element: vaadin-grid-selection-column
---

## Description

`<vaadin-grid-selection-column>` is a helper element for the `<vaadin-grid>`
that provides default renderers and functionality for item selection.

#### Example:
```html
<vaadin-grid>
 <vaadin-grid-selection-column frozen auto-select></vaadin-grid-selection-column>

 <vaadin-grid-column>
   ...
```

By default the selection column displays `<vaadin-checkbox>` elements in the
column cells. The checkboxes in the body rows toggle selection of the corresponding row items.

When the grid data is provided as an array of [`items`](/elements/vaadin-grid#items),
the column header gets an additional checkbox that can be used for toggling
selection for all the items at once.

__The default content can also be overridden__

## Properties

### autoSelect

**Type:** `boolean`

When true, the active item gets automatically selected.

### autoWidth

**Type:** `boolean`

Override `autoWidth` to enable auto-width

### dragSelect

**Type:** `boolean`

When true, rows can be selected by dragging over the selection column.

### flexGrow

**Type:** `number`

Flex grow ratio for the cell widths. When set to 0, cell width is fixed.

### footerPartName

**Type:** `string | null | undefined`

Custom part name for the footer cell.

### footerRenderer

**Type:** `GridHeaderFooterRenderer<any, GridColumn<any>> | null | undefined`

Custom function for rendering the footer content.
Receives two arguments:

- `root` The footer cell content DOM element. Append your content to it.
- `column` The `<vaadin-grid-column>` element.

See also: [GridHeaderFooterRenderer](#gridheaderfooterrenderer)

### frozen

**Type:** `boolean`

When true, the column is frozen. When a column inside of a column group is frozen,
all of the sibling columns inside the group will get frozen also.

### frozenToEnd

**Type:** `boolean`

When true, the column is frozen to end of grid.

When a column inside of a column group is frozen to end, all of the sibling columns
inside the group will get frozen to end also.

Column can not be set as `frozen` and `frozenToEnd` at the same time.

### header

**Type:** `string | null | undefined`

Text content to display in the header cell of the column.

### headerPartName

**Type:** `string | null | undefined`

Custom part name for the header cell.

### headerRenderer

**Type:** `GridHeaderFooterRenderer<any, GridColumn<any>> | null | undefined`

Custom function for rendering the header content.
Receives two arguments:

- `root` The header cell content DOM element. Append your content to it.
- `column` The `<vaadin-grid-column>` element.

See also: [GridHeaderFooterRenderer](#gridheaderfooterrenderer)

### hidden

**Type:** `boolean`

When set to true, the cells for this column are hidden.

### path

**Type:** `string | null | undefined`

Path to an item sub-property whose value gets displayed in the column body cells.
The property name is also shown in the column header if an explicit header or renderer isn't defined.

### renderer

**Type:** `GridBodyRenderer<any, GridColumn<any>> | null | undefined`

Custom function for rendering the cell content.
Receives three arguments:

- `root` The cell content DOM element. Append your content to it.
- `column` The `<vaadin-grid-column>` element.
- `model` The object with the properties related with
  the rendered item, contains:
  - `model.index` The index of the item.
  - `model.item` The item.
  - `model.expanded` Sublevel toggle state.
  - `model.level` Level of the tree represented with a horizontal offset of the toggle button.
  - `model.selected` Selected state.
  - `model.detailsOpened` Details opened state.
  - `model.hasChildren` Whether the item has children.

See also: [GridBodyRenderer](#gridbodyrenderer)

### resizable

**Type:** `boolean | null | undefined`

When set to true, the column is user-resizable.

### rowHeader

**Type:** `boolean`

When true, the cells for this column will be rendered with the `role` attribute
set as `rowheader`, instead of the `gridcell` role value used by default.

When a column is set as row header, its cells will be announced by screen readers
while navigating to help user identify the current row as uniquely as possible.

### selectAll

**Type:** `boolean`

When true, all the items are selected.

### textAlign

**Type:** `GridColumnTextAlign | undefined`

Aligns the columns cell content horizontally.
Supported values: "start", "center" and "end".

See also: [GridColumnTextAlign](#gridcolumntextalign)

### width

**Type:** `string | null | undefined`

Width of the cells for this column.

## Events

### select-all-changed

**Type:** [GridSelectionColumnSelectAllChangedEvent](#gridselectioncolumnselectallchangedevent)

Fired when the `selectAll` property changes.

## Types

### GridBodyRenderer

```ts
export type GridBodyRenderer<TItem, Column extends GridColumnMixin<TItem, Column>> = (
  root: HTMLElement,
  column: Column,
  model: GridItemModel<TItem>,
) => void;
```

### GridColumnTextAlign

```ts
export type GridColumnTextAlign = 'center' | 'end' | 'start' | null;
```

### GridHeaderFooterRenderer

```ts
export type GridHeaderFooterRenderer<TItem, Column extends ColumnBaseMixinClass<TItem, Column>> = (
  root: HTMLElement,
  column: Column,
) => void;
```

### GridItemModel

```ts
export interface GridItemModel<TItem> {
  index: number;
  item: TItem;
  selected?: boolean;
  expanded?: boolean;
  level?: number;
  detailsOpened?: boolean;
  hasChildren?: boolean;
}
```

### GridSelectionColumnSelectAllChangedEvent

```ts
/**
 * Fired when the `selectAll` property changes.
 */
export type GridSelectionColumnSelectAllChangedEvent = CustomEvent<{ value: boolean }>;
```