Vaadin WC API reference

GridColumnGroup

View as MD

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: 

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

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.

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

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

width

Type: string | null | undefined

Width of the column group as the sum of the widths of its child columns.

Types

GridColumnTextAlign 

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

GridHeaderFooterRenderer 

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