Column groups

Group your columns, using multiple levels of nested column headers, to better reflect the structure of your data.

Nested column headers

The NestedHeaders plugin allows you to create a nested headers structure by using the HTML colspan and rowspan attributes.

To create a header that spans multiple columns, its corresponding configuration array element should be provided as an object with label and colspan properties. The label property defines the header’s label, while the colspan property defines the number of columns that the header should cover.

To create a header that spans multiple header rows, add a rowspan property to that object. See Rowspan below.

Configuration

Example

1
/* file: app.component.ts */
2
import { Component } from '@angular/core';
3
import { GridSettings } from '@handsontable/angular-wrapper';
4

5
@Component({
6
  selector: 'app-example1',
7
  template: `
8
    <hot-table
9
      [settings]="hotSettings!" [data]="hotData">
10
    </hot-table>
11
  `,
12
  standalone: false
13
})
14
export class AppComponent {
15

16
  readonly hotData = [
17
    ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1', 'J1'],
18
    ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2', 'J2'],
19
    ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3', 'J3'],
20
    ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4', 'H4', 'I4', 'J4'],
21
    ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5', 'H5', 'I5', 'J5'],
22
  ];
23

24
  readonly hotSettings: GridSettings = {
25
    colHeaders: true,
26
    rowHeaders: true,
27
    height: 'auto',
28
    nestedHeaders: [
29
      ['A', { label: 'B', colspan: 8 }, 'C'],
30
      ['D', { label: 'E', colspan: 4 }, { label: 'F', colspan: 4 }, 'G'],
31
      [
32
        'H',
33
        { label: 'I', colspan: 2 },
34
        { label: 'J', colspan: 2 },
35
        { label: 'K', colspan: 2 },
36
        { label: 'L', colspan: 2 },
37
        'M',
38
      ],
39
      ['N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W'],
40
    ],
41
    autoWrapRow: true,
42
    autoWrapCol: true,
43
  };
44
}
45
/* end-file */
46

47

48
/* file: app.module.ts */
49
import { NgModule, ApplicationConfig } from '@angular/core';
50
import { BrowserModule } from '@angular/platform-browser';
51
import { registerAllModules } from 'handsontable/registry';
52
import { HOT_GLOBAL_CONFIG, HotGlobalConfig, HotTableModule } from '@handsontable/angular-wrapper';
53
import { CommonModule } from '@angular/common';
54
import { NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';
55

56
/* start:skip-in-compilation */
57
import { AppComponent } from './app.component';
58
/* end:skip-in-compilation */
59

60
// register Handsontable's modules
61
registerAllModules();
62

63
export const appConfig: ApplicationConfig = {
64
  providers: [
65
    {
66
      provide: HOT_GLOBAL_CONFIG,
67
      useValue: {
68
        license: NON_COMMERCIAL_LICENSE,
69
      } as HotGlobalConfig
70
    }
71
  ],
72
};
73

74
@NgModule({
75
  imports: [ BrowserModule, HotTableModule, CommonModule ],
76
  declarations: [ AppComponent ],
77
  providers: [...appConfig.providers],
78
  bootstrap: [ AppComponent ]
79
})
80

81
export class AppModule { }
82
/* end-file */

1
<div>
2
    <app-example1></app-example1>
3
</div>

Rowspan

The rowspan property sets how many header rows a single header cell should cover. Use an integer greater than 1. Positions in lower rows that sit under that cell can use an empty string '' as a placeholder, but those placeholders are optional. Handsontable can infer covered slots when you omit them.

You can combine rowspan and colspan on the same header object. The same rules apply as for colspan only: a header cannot be wider than its parent in the hierarchy, and overlapping header definitions are not supported.

Configuration

1
nestedHeaders: [
2
  [{ label: 'A', rowspan: 2 }, { label: 'B', colspan: 2 }],
3
  ['', 'C', 'D'],
4
];

Collapsible headers

The CollapsibleColumns plugin enables columns and their headers to be collapsed/expanded.

This plugin adds multi-column headers which have buttons. Clicking these buttons will collapse or expand all “child” headers, leaving the first one visible.

The NestedHeaders plugin needs to be enabled for this to work properly.

Configuration

To enable the Collapsible Columns plugin, either set the collapsibleColumns configuration option to:

true - this will enable the functionality for all multi-column headers, every column with the colspan attribute defined will be extended with the “expand/collapse” button
An array of objects containing information specifying which headers should have the “expand/collapse” buttons for example:

1
collapsibleColumns: [
2
  { row: -4, col: 1, collapsible: true }, // Add the button to the 4th-level header of the 1st column - counting from the first table row upwards.
3
  { row: -3, col: 5, collapsible: true }, // Add the button to the 3rd-level header of the 5th column - counting from the first table row upwards.
4
];

Example

1
/* file: app.component.ts */
2
import { Component } from '@angular/core';
3
import { GridSettings } from '@handsontable/angular-wrapper';
4

5
@Component({
6
  selector: 'app-example2',
7
  template: `
8
    <hot-table
9
      [settings]="hotSettings!" [data]="hotData">
10
    </hot-table>
11
  `,
12
  standalone: false
13
})
14
export class AppComponent {
15

16
  readonly hotData = [
17
    ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1', 'J1'],
18
    ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2', 'J2'],
19
    ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3', 'J3'],
20
    ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4', 'H4', 'I4', 'J4'],
21
    ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5', 'H5', 'I5', 'J5'],
22
  ];
23

24
  readonly hotSettings: GridSettings = {
25
    colHeaders: true,
26
    rowHeaders: true,
27
    colWidths: 60,
28
    height: 'auto',
29
    nestedHeaders: [
30
      ['A', { label: 'B', colspan: 8 }, 'C'],
31
      ['D', { label: 'E', colspan: 4 }, { label: 'F', colspan: 4 }, 'G'],
32
      [
33
        'H',
34
        { label: 'I', colspan: 2 },
35
        { label: 'J', colspan: 2 },
36
        { label: 'K', colspan: 2 },
37
        { label: 'L', colspan: 2 },
38
        'M',
39
      ],
40
      ['N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W'],
41
    ],
42
    collapsibleColumns: [
43
      { row: -4, col: 1, collapsible: true },
44
      { row: -3, col: 1, collapsible: true },
45
      { row: -2, col: 1, collapsible: true },
46
      { row: -2, col: 3, collapsible: true },
47
    ],
48
    autoWrapRow: true,
49
    autoWrapCol: true,
50
  };
51
}
52
/* end-file */
53

54

55
/* file: app.module.ts */
56
import { NgModule, ApplicationConfig } from '@angular/core';
57
import { BrowserModule } from '@angular/platform-browser';
58
import { registerAllModules } from 'handsontable/registry';
59
import { HOT_GLOBAL_CONFIG, HotGlobalConfig, HotTableModule } from '@handsontable/angular-wrapper';
60
import { CommonModule } from '@angular/common';
61
import { NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';
62

63
/* start:skip-in-compilation */
64
import { AppComponent } from './app.component';
65
/* end:skip-in-compilation */
66

67
// register Handsontable's modules
68
registerAllModules();
69

70
export const appConfig: ApplicationConfig = {
71
  providers: [
72
    {
73
      provide: HOT_GLOBAL_CONFIG,
74
      useValue: {
75
        license: NON_COMMERCIAL_LICENSE,
76
      } as HotGlobalConfig
77
    }
78
  ],
79
};
80

81
@NgModule({
82
  imports: [ BrowserModule, HotTableModule, CommonModule ],
83
  declarations: [ AppComponent ],
84
  providers: [...appConfig.providers],
85
  bootstrap: [ AppComponent ]
86
})
87

88
export class AppModule { }
89
/* end-file */

1
<div>
2
    <app-example2></app-example2>
3
</div>

Known limitations

A column header can span up to 1000 columns, as the HTML table specification sets the limit of colspan to 1000.
A nested column header can’t be wider than its parent element (headers can’t overlap).
If rowspan is larger than the number of header rows below the cell, Handsontable clamps it to the remaining header levels.