---
title: GridColumnGroup
description: GridColumnGroup
element: vaadin-grid-column-group
---

## Description

A `<vaadin-grid-column-group>` is used to make groups of columns in `<vaadin-grid>` and
to configure additional headers and footers.

Groups can be nested to create complex header and footer configurations.

#### Example:
```html
<vaadin-grid-column-group resizable id="columnGroup">
  <vaadin-grid-column id="column1"></vaadin-grid-column>
  <vaadin-grid-column id="column2"></vaadin-grid-column>
</vaadin-grid-column-group>
```

```js
const columnGroup = document.querySelector('#columnGroup');
columnGroup.headerRenderer = (root, columnGroup) => {
  root.textContent = 'header';
}

const column1 = document.querySelector('#column1');
column1.headerRenderer = (root, column) => { ... };
column1.renderer = (root, column, model) => { ... };

const column2 = document.querySelector('#column2');
column2.headerRenderer = (root, column) => { ... };
column2.renderer = (root, column, model) => { ... };
```

## Properties

### flexGrow

**Type:** `number | null | undefined`

Flex grow ratio for the column group as the sum of the ratios of its child columns.

### footerPartName

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

Custom part name for the footer cell.

### footerRenderer

**Type:** `GridHeaderFooterRenderer<any, GridColumnGroup<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, GridColumnGroup<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.

### 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.

### 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 column group as the sum of the widths of its child columns.

## Types

### 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;
```