Column Group

A column group is a collection of columns represented as a column header that spans over the child column.

In the example we have 2 groups, for columns name and gender and for country and language.

The width of each group is the sum of the widths of it's child columns. When a column change size, hide or move the parent column group will resize to fit.

Column group width definitions have no effect, their width is determined by the child columns only.

Column Group Definition

The definition of a column group describe which child columns are in the group. This is done by providing the id's of the columns the belong to the groups in the columnIds property.

In addition, each column group must describe which row it belongs to using the rowIndex property.

export interface PblColumnGroupDefinition extends PblBaseColumnDefinition {

  id?: string;

  rowIndex: number;

  columnIds: string[];
}

Once defined, child columns can not leave the group.

Group Row

A group row is a header row but only for columns groups.

A table can host multiple header rows including multiple group rows, when setting the rowIndex the following rules apply:

• Column groups on the same row can not share child columns
• Column groups can not mix with column headers on the same row

This can become hard to track, luckily for us the columns factory will strip the complexity for us.

Complex Group Hierarchy

Grouping of groups is possible but not supported natively. A column group can only host columns.

Creating a group of groups is possible through definition, simply set the all the children of the groups you want to group as the children of a single group hosted under a top-level row.

Additional functionality

Column groups are in most part a UX feature. Plugins might extend it to support advanced features and provide additional usability.

For example, the `drag` plugin provide the ability to split groups when moving columns.