Row hiding

Hide individual rows to avoid rendering them as DOM elements. It helps you reduce screen clutter and improve the grid’s performance.

Overview

“Hiding a row” means that the hidden row doesn’t get rendered as a DOM element.

When you’re hiding a row:

The source data doesn’t get modified.
The HiddenRows plugin doesn’t participate in data transformation
(the shape of the data returned by the getData*() methods stays intact).

Enable row hiding

To enable row hiding, use the hiddenRows option.

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'],
18
    ['A2', 'B2', 'C2', 'D2', 'E2'],
19
    ['A3', 'B3', 'C3', 'D3', 'E3'],
20
    ['A4', 'B4', 'C4', 'D4', 'E4'],
21
    ['A5', 'B5', 'C5', 'D5', 'E5'],
22
    ['A6', 'B6', 'C6', 'D6', 'E6'],
23
    ['A7', 'B7', 'C7', 'D7', 'E7'],
24
    ['A8', 'B8', 'C8', 'D8', 'E8'],
25
    ['A9', 'B9', 'C9', 'D9', 'E9'],
26
    ['A10', 'B10', 'C10', 'D10', 'E10'],
27
    ['A11', 'B11', 'C11', 'D11', 'E11'],
28
    ['A12', 'B12', 'C12', 'D12', 'E12'],
29
  ];
30

31
  readonly hotSettings: GridSettings = {
32
    height: 'auto',
33
    colHeaders: true,
34
    rowHeaders: true,
35
    // enable the `HiddenRows` plugin
36
    hiddenRows: {
37
      rows: [3, 5, 9],
38
      // show UI indicators to mark hidden rows
39
      indicators: true,
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>

Set up row hiding

To set up your row hiding configuration, follow the steps below.

Specify rows hidden by default

To both enable row hiding and specify rows hidden by default, set the hiddenRows configuration option to an object.

In the object, add a rows property, and set it to an array of row indexes.

Now, those rows are hidden by default:
TypeScript
```
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'],
18
    ['A2', 'B2', 'C2', 'D2', 'E2'],
19
    ['A3', 'B3', 'C3', 'D3', 'E3'],
20
    ['A4', 'B4', 'C4', 'D4', 'E4'],
21
    ['A5', 'B5', 'C5', 'D5', 'E5'],
22
    ['A6', 'B6', 'C6', 'D6', 'E6'],
23
    ['A7', 'B7', 'C7', 'D7', 'E7'],
24
    ['A8', 'B8', 'C8', 'D8', 'E8'],
25
    ['A9', 'B9', 'C9', 'D9', 'E9'],
26
    ['A10', 'B10', 'C10', 'D10', 'E10'],
27
    ['A11', 'B11', 'C11', 'D11', 'E11'],
28
    ['A12', 'B12', 'C12', 'D12', 'E12'],
29
  ];
30

31
  readonly hotSettings: GridSettings = {
32
    height: 'auto',
33
    colHeaders: true,
34
    rowHeaders: true,
35
    // enable the `HiddenRows` plugin
36
    hiddenRows: {
37
      // specify rows hidden by default
38
      rows: [3, 5, 9],
39
    },
40
    autoWrapRow: true,
41
    autoWrapCol: true,
42
  };
43
}
44
/* end-file */
45

46

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

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

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

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

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

80
export class AppModule { }
81
/* end-file */
```
HTML
```
1
<div>
2
  <app-example2></app-example2>
3
</div>
```
Show UI indicators

To easily see which rows are currently hidden, display UI indicators.

To enable the UI indicators, in the hiddenRows object, set the indicators property to true:
TypeScript
```
1
/* file: app.component.ts */
2
import { Component } from '@angular/core';
3
import { GridSettings } from '@handsontable/angular-wrapper';
4

5
@Component({
6
  selector: 'app-example3',
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'],
18
    ['A2', 'B2', 'C2', 'D2', 'E2'],
19
    ['A3', 'B3', 'C3', 'D3', 'E3'],
20
    ['A4', 'B4', 'C4', 'D4', 'E4'],
21
    ['A5', 'B5', 'C5', 'D5', 'E5'],
22
    ['A6', 'B6', 'C6', 'D6', 'E6'],
23
    ['A7', 'B7', 'C7', 'D7', 'E7'],
24
    ['A8', 'B8', 'C8', 'D8', 'E8'],
25
    ['A9', 'B9', 'C9', 'D9', 'E9'],
26
    ['A10', 'B10', 'C10', 'D10', 'E10'],
27
    ['A11', 'B11', 'C11', 'D11', 'E11'],
28
    ['A12', 'B12', 'C12', 'D12', 'E12'],
29
  ];
30

31
  readonly hotSettings: GridSettings = {
32
    height: 'auto',
33
    colHeaders: true,
34
    rowHeaders: true,
35
    hiddenRows: {
36
      rows: [3, 5, 9],
37
      // show UI indicators to mark hidden rows
38
      indicators: true,
39
    },
40
    autoWrapRow: true,
41
    autoWrapCol: true,
42
  };
43
}
44
/* end-file */
45

46

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

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

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

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

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

80
export class AppModule { }
81
/* end-file */
```
HTML
```
1
<div>
2
  <app-example3></app-example3>
3
</div>
```
Set up context menu items

To easily hide and unhide rows, add row hiding items to Handsontable’s context menu.

Enable both the ContextMenu plugin and the HiddenRows plugin. Now, the context menu automatically displays additional items for hiding and unhiding rows.
TypeScript
```
1
/* file: app.component.ts */
2
import { Component } from '@angular/core';
3
import { GridSettings } from '@handsontable/angular-wrapper';
4

5
@Component({
6
  selector: 'app-example4',
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'],
18
    ['A2', 'B2', 'C2', 'D2', 'E2'],
19
    ['A3', 'B3', 'C3', 'D3', 'E3'],
20
    ['A4', 'B4', 'C4', 'D4', 'E4'],
21
    ['A5', 'B5', 'C5', 'D5', 'E5'],
22
    ['A6', 'B6', 'C6', 'D6', 'E6'],
23
    ['A7', 'B7', 'C7', 'D7', 'E7'],
24
    ['A8', 'B8', 'C8', 'D8', 'E8'],
25
    ['A9', 'B9', 'C9', 'D9', 'E9'],
26
    ['A10', 'B10', 'C10', 'D10', 'E10'],
27
    ['A11', 'B11', 'C11', 'D11', 'E11'],
28
    ['A12', 'B12', 'C12', 'D12', 'E12'],
29
  ];
30

31
  readonly hotSettings: GridSettings = {
32
    height: 'auto',
33
    colHeaders: true,
34
    rowHeaders: true,
35
    // enable the context menu
36
    contextMenu: true,
37
    // enable the `HiddenRows` plugin
38
    // automatically adds the context menu's row hiding items
39
    hiddenRows: {
40
      rows: [3, 5, 9],
41
      indicators: true,
42
    },
43
    autoWrapRow: true,
44
    autoWrapCol: true,
45
  };
46
}
47
/* end-file */
48

49

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

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

62
// register Handsontable's modules
63
registerAllModules();
64

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

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

83
export class AppModule { }
84
/* end-file */
```
HTML
```
1
<div>
2
  <app-example4></app-example4>
3
</div>
```
You can also add the row hiding menu items individually, by adding the hidden_rows_show and hidden_rows_hide strings to the contextMenu parameter:
TypeScript
```
1
/* file: app.component.ts */
2
import { Component } from '@angular/core';
3
import { GridSettings } from '@handsontable/angular-wrapper';
4

5
@Component({
6
  selector: 'app-example5',
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'],
18
    ['A2', 'B2', 'C2', 'D2', 'E2'],
19
    ['A3', 'B3', 'C3', 'D3', 'E3'],
20
    ['A4', 'B4', 'C4', 'D4', 'E4'],
21
    ['A5', 'B5', 'C5', 'D5', 'E5'],
22
    ['A6', 'B6', 'C6', 'D6', 'E6'],
23
    ['A7', 'B7', 'C7', 'D7', 'E7'],
24
    ['A8', 'B8', 'C8', 'D8', 'E8'],
25
    ['A9', 'B9', 'C9', 'D9', 'E9'],
26
    ['A10', 'B10', 'C10', 'D10', 'E10'],
27
    ['A11', 'B11', 'C11', 'D11', 'E11'],
28
    ['A12', 'B12', 'C12', 'D12', 'E12'],
29
  ];
30

31
  readonly hotSettings: GridSettings = {
32
    height: 'auto',
33
    colHeaders: true,
34
    rowHeaders: true,
35
    // individually add row hiding context menu items
36
    contextMenu: ['hidden_rows_show', 'hidden_rows_hide'],
37
    hiddenRows: {
38
      rows: [3, 5, 9],
39
      indicators: true,
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 */
```
HTML
```
1
<div>
2
  <app-example5></app-example5>
3
</div>
```
Set up copy and paste behavior

By default, hidden rows are included in copying and pasting.

To exclude hidden rows from copying and pasting, in the hiddenRows object, set the copyPasteEnabled property to false:
TypeScript
```
1
/* file: app.component.ts */
2
import { Component } from '@angular/core';
3
import { GridSettings } from '@handsontable/angular-wrapper';
4

5
@Component({
6
  selector: 'app-example6',
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'],
18
    ['A2', 'B2', 'C2', 'D2', 'E2'],
19
    ['A3', 'B3', 'C3', 'D3', 'E3'],
20
    ['A4', 'B4', 'C4', 'D4', 'E4'],
21
    ['A5', 'B5', 'C5', 'D5', 'E5'],
22
    ['A6', 'B6', 'C6', 'D6', 'E6'],
23
    ['A7', 'B7', 'C7', 'D7', 'E7'],
24
    ['A8', 'B8', 'C8', 'D8', 'E8'],
25
    ['A9', 'B9', 'C9', 'D9', 'E9'],
26
    ['A10', 'B10', 'C10', 'D10', 'E10'],
27
    ['A11', 'B11', 'C11', 'D11', 'E11'],
28
    ['A12', 'B12', 'C12', 'D12', 'E12'],
29
  ];
30

31
  readonly hotSettings: GridSettings = {
32
    height: 'auto',
33
    colHeaders: true,
34
    rowHeaders: true,
35
    contextMenu: ['hidden_rows_show', 'hidden_rows_hide'],
36
    hiddenRows: {
37
      rows: [3, 5, 9],
38
      indicators: true,
39
      // exclude hidden rows from copying and pasting
40
      copyPasteEnabled: false,
41
    },
42
    autoWrapRow: true,
43
    autoWrapCol: true,
44
  };
45
}
46
/* end-file */
47

48

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

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

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

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

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

82
export class AppModule { }
83
/* end-file */
```
HTML
```
1
<div>
2
    <app-example6></app-example6>
3
</div>
```

Row hiding API methods

For the most popular row hiding tasks, use the API methods below.

To see your changes, re-render your Handsontable instance with the render() method.

To obtain the Handsontable instance from the Angular wrapper component, you can use Angular’s @ViewChild decorator to reference the HotTableComponent and then access its hotInstance property.

1
@ViewChild(HotTableComponent, {static: false})
2
hotTable!: HotTableComponent;
3

4
ngAfterViewInit() {
5
  // The Handsontable instance is available through the hotInstance property
6
  const hot = this.hotTable.hotInstance;
7
  // You can now use the "hot" instance to call Handsontable's API methods
8
  // ...
9
}

Access the `HiddenRows` plugin instance

To access the HiddenRows plugin instance, use the getPlugin() method:

1
const plugin = hot.getPlugin('hiddenRows');

Hide a single row

To hide a single row, use the hideRow() method:

1
const plugin = hot.getPlugin('hiddenRows');
2

3
plugin.hideRow(4);

Hide multiple rows

To hide multiple rows:

Either pass row indexes as arguments to the hideRow() method
Or pass an array of row indexes to the hideRows() method

1
const plugin = hot.getPlugin('hiddenRows');
2

3
plugin.hideRow(0, 4, 6);
4
// or
5
plugin.hideRows([0, 4, 6]);

Unhide a single row

To unhide a single row, use the showRow() method:

1
const plugin = hot.getPlugin('hiddenRows');
2

3
plugin.showRow(4);

Unhide multiple rows

To unhide multiple rows:

Either pass row indexes as arguments to the showRow() method
Or pass an array of row indexes to the showRows() method

1
const plugin = hot.getPlugin('hiddenRows');
2

3
plugin.showRow(0, 4, 6);
4
// or
5
plugin.showRows([0, 4, 6]);

Configuration options

Hooks

Plugins

Row hiding

Overview

Enable row hiding

Set up row hiding

Specify rows hidden by default

Show UI indicators

Set up context menu items

Set up copy and paste behavior