Column hiding

Hide individual columns to reduce screen clutter and improve the grid’s performance.

Overview

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

When you’re hiding a column:

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

Enable column hiding

To enable column hiding, use the hiddenColumns option.

1
import Handsontable from 'handsontable/base';
2
import { registerAllModules } from 'handsontable/registry';
3

4
// Register all Handsontable's modules.
5
registerAllModules();
6

7
const container = document.querySelector('#example1');
8

9
new Handsontable(container, {
10
  licenseKey: 'non-commercial-and-evaluation',
11
  data: [
12
    ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1', 'J1', 'K1', 'L1'],
13
    ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2', 'J2', 'K2', 'L2'],
14
    ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3', 'J3', 'K3', 'L3'],
15
    ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4', 'H4', 'I4', 'J4', 'K4', 'L4'],
16
    ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5', 'H5', 'I5', 'J5', 'K5', 'L5'],
17
  ],
18
  height: 'auto',
19
  colHeaders: true,
20
  rowHeaders: true,
21
  contextMenu: true,
22
  // enable the `HiddenColumns` plugin
23
  hiddenColumns: {
24
    columns: [2, 4, 6],
25
    indicators: true,
26
  },
27
  autoWrapRow: true,
28
  autoWrapCol: true,
29
});

1
import Handsontable from 'handsontable/base';
2
import { registerAllModules } from 'handsontable/registry';
3

4
// Register all Handsontable's modules.
5
registerAllModules();
6

7
const container = document.querySelector('#example1')!;
8

9
new Handsontable(container, {
10
  licenseKey: 'non-commercial-and-evaluation',
11
  data: [
12
    ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1', 'J1', 'K1', 'L1'],
13
    ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2', 'J2', 'K2', 'L2'],
14
    ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3', 'J3', 'K3', 'L3'],
15
    ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4', 'H4', 'I4', 'J4', 'K4', 'L4'],
16
    ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5', 'H5', 'I5', 'J5', 'K5', 'L5'],
17
  ],
18
  height: 'auto',
19
  colHeaders: true,
20
  rowHeaders: true,
21
  contextMenu: true,
22
  // enable the `HiddenColumns` plugin
23
  hiddenColumns: {
24
    columns: [2, 4, 6],
25
    indicators: true,
26
  },
27
  autoWrapRow: true,
28
  autoWrapCol: true,
29
});

Set up column hiding

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

Specify columns hidden by default

To both enable column hiding and specify columns hidden by default, set the hiddenColumns configuration option to an object.

In the object, add a columns configuration option, and set it to an array of column indexes.

Now, those columns are hidden by default:
JavaScript
```
1
import Handsontable from 'handsontable/base';
2
import { registerAllModules } from 'handsontable/registry';
3

4
// Register all Handsontable's modules.
5
registerAllModules();
6

7
const container = document.querySelector('#example2');
8

9
new Handsontable(container, {
10
  licenseKey: 'non-commercial-and-evaluation',
11
  data: [
12
    ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1', 'J1', 'K1', 'L1'],
13
    ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2', 'J2', 'K2', 'L2'],
14
    ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3', 'J3', 'K3', 'L3'],
15
    ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4', 'H4', 'I4', 'J4', 'K4', 'L4'],
16
    ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5', 'H5', 'I5', 'J5', 'K5', 'L5'],
17
  ],
18
  height: 'auto',
19
  colHeaders: true,
20
  rowHeaders: true,
21
  // enable the `HiddenColumns` plugin
22
  hiddenColumns: {
23
    // specify columns hidden by default
24
    columns: [3, 5, 9],
25
  },
26
  autoWrapRow: true,
27
  autoWrapCol: true,
28
});
```
TypeScript
```
1
import Handsontable from 'handsontable/base';
2
import { registerAllModules } from 'handsontable/registry';
3

4
// Register all Handsontable's modules.
5
registerAllModules();
6

7
const container = document.querySelector('#example2')!;
8

9
new Handsontable(container, {
10
  licenseKey: 'non-commercial-and-evaluation',
11
  data: [
12
    ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1', 'J1', 'K1', 'L1'],
13
    ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2', 'J2', 'K2', 'L2'],
14
    ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3', 'J3', 'K3', 'L3'],
15
    ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4', 'H4', 'I4', 'J4', 'K4', 'L4'],
16
    ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5', 'H5', 'I5', 'J5', 'K5', 'L5'],
17
  ],
18
  height: 'auto',
19
  colHeaders: true,
20
  rowHeaders: true,
21
  // enable the `HiddenColumns` plugin
22
  hiddenColumns: {
23
    // specify columns hidden by default
24
    columns: [3, 5, 9],
25
  },
26
  autoWrapRow: true,
27
  autoWrapCol: true,
28
});
```
Show UI indicators

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

To enable the UI indicators, in the hiddenColumns object, set the indicators property to true:

If you use both the NestedHeaders plugin and the HiddenColumns plugin, you also need to set the colHeaders property to true. Otherwise, indicators won't work.
JavaScript
```
1
import Handsontable from 'handsontable/base';
2
import { registerAllModules } from 'handsontable/registry';
3

4
// Register all Handsontable's modules.
5
registerAllModules();
6

7
const container = document.querySelector('#example3');
8

9
new Handsontable(container, {
10
  licenseKey: 'non-commercial-and-evaluation',
11
  data: [
12
    ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1', 'J1', 'K1', 'L1'],
13
    ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2', 'J2', 'K2', 'L2'],
14
    ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3', 'J3', 'K3', 'L3'],
15
    ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4', 'H4', 'I4', 'J4', 'K4', 'L4'],
16
    ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5', 'H5', 'I5', 'J5', 'K5', 'L5'],
17
  ],
18
  height: 'auto',
19
  colHeaders: true,
20
  rowHeaders: true,
21
  hiddenColumns: {
22
    columns: [3, 5, 9],
23
    // show UI indicators to mark hidden columns
24
    indicators: true,
25
  },
26
  autoWrapRow: true,
27
  autoWrapCol: true,
28
});
```
TypeScript
```
1
import Handsontable from 'handsontable/base';
2
import { registerAllModules } from 'handsontable/registry';
3

4
// Register all Handsontable's modules.
5
registerAllModules();
6

7
const container = document.querySelector('#example3')!;
8

9
new Handsontable(container, {
10
  licenseKey: 'non-commercial-and-evaluation',
11
  data: [
12
    ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1', 'J1', 'K1', 'L1'],
13
    ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2', 'J2', 'K2', 'L2'],
14
    ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3', 'J3', 'K3', 'L3'],
15
    ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4', 'H4', 'I4', 'J4', 'K4', 'L4'],
16
    ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5', 'H5', 'I5', 'J5', 'K5', 'L5'],
17
  ],
18
  height: 'auto',
19
  colHeaders: true,
20
  rowHeaders: true,
21
  hiddenColumns: {
22
    columns: [3, 5, 9],
23
    // show UI indicators to mark hidden columns
24
    indicators: true,
25
  },
26
  autoWrapRow: true,
27
  autoWrapCol: true,
28
});
```
Set up context menu items

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

Enable both the ContextMenu plugin and the HiddenColumns plugin. Now, the context menu automatically displays additional items for hiding and unhiding columns.
JavaScript
```
1
import Handsontable from 'handsontable/base';
2
import { registerAllModules } from 'handsontable/registry';
3

4
// Register all Handsontable's modules.
5
registerAllModules();
6

7
const container = document.querySelector('#example4');
8

9
new Handsontable(container, {
10
  licenseKey: 'non-commercial-and-evaluation',
11
  data: [
12
    ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1', 'J1', 'K1', 'L1'],
13
    ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2', 'J2', 'K2', 'L2'],
14
    ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3', 'J3', 'K3', 'L3'],
15
    ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4', 'H4', 'I4', 'J4', 'K4', 'L4'],
16
    ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5', 'H5', 'I5', 'J5', 'K5', 'L5'],
17
  ],
18
  height: 'auto',
19
  colHeaders: true,
20
  rowHeaders: true,
21
  // enable the context menu
22
  contextMenu: true,
23
  // enable the `HiddenColumns` plugin
24
  // automatically adds the context menu's column hiding items
25
  hiddenColumns: {
26
    columns: [3, 5, 9],
27
    indicators: true,
28
  },
29
  autoWrapRow: true,
30
  autoWrapCol: true,
31
});
```
TypeScript
```
1
import Handsontable from 'handsontable/base';
2
import { registerAllModules } from 'handsontable/registry';
3

4
// Register all Handsontable's modules.
5
registerAllModules();
6

7
const container = document.querySelector('#example4')!;
8

9
new Handsontable(container, {
10
  licenseKey: 'non-commercial-and-evaluation',
11
  data: [
12
    ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1', 'J1', 'K1', 'L1'],
13
    ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2', 'J2', 'K2', 'L2'],
14
    ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3', 'J3', 'K3', 'L3'],
15
    ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4', 'H4', 'I4', 'J4', 'K4', 'L4'],
16
    ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5', 'H5', 'I5', 'J5', 'K5', 'L5'],
17
  ],
18
  height: 'auto',
19
  colHeaders: true,
20
  rowHeaders: true,
21
  // enable the context menu
22
  contextMenu: true,
23
  // enable the `HiddenColumns` plugin
24
  // automatically adds the context menu's column hiding items
25
  hiddenColumns: {
26
    columns: [3, 5, 9],
27
    indicators: true,
28
  },
29
  autoWrapRow: true,
30
  autoWrapCol: true,
31
});
```
You can also add the column hiding menu items individually, by adding the hidden_columns_show and hidden_columns_hide strings to the contextMenu parameter:
JavaScript
```
1
import Handsontable from 'handsontable/base';
2
import { registerAllModules } from 'handsontable/registry';
3

4
// Register all Handsontable's modules.
5
registerAllModules();
6

7
const container = document.querySelector('#example5');
8

9
new Handsontable(container, {
10
  licenseKey: 'non-commercial-and-evaluation',
11
  data: [
12
    ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1', 'J1', 'K1', 'L1'],
13
    ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2', 'J2', 'K2', 'L2'],
14
    ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3', 'J3', 'K3', 'L3'],
15
    ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4', 'H4', 'I4', 'J4', 'K4', 'L4'],
16
    ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5', 'H5', 'I5', 'J5', 'K5', 'L5'],
17
  ],
18
  height: 'auto',
19
  colHeaders: true,
20
  rowHeaders: true,
21
  // individually add column hiding context menu items
22
  contextMenu: ['hidden_columns_show', 'hidden_columns_hide'],
23
  hiddenColumns: {
24
    columns: [3, 5, 9],
25
    indicators: true,
26
  },
27
  autoWrapRow: true,
28
  autoWrapCol: true,
29
});
```
TypeScript
```
1
import Handsontable from 'handsontable/base';
2
import { registerAllModules } from 'handsontable/registry';
3

4
// Register all Handsontable's modules.
5
registerAllModules();
6

7
const container = document.querySelector('#example5')!;
8

9
new Handsontable(container, {
10
  licenseKey: 'non-commercial-and-evaluation',
11
  data: [
12
    ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1', 'J1', 'K1', 'L1'],
13
    ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2', 'J2', 'K2', 'L2'],
14
    ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3', 'J3', 'K3', 'L3'],
15
    ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4', 'H4', 'I4', 'J4', 'K4', 'L4'],
16
    ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5', 'H5', 'I5', 'J5', 'K5', 'L5'],
17
  ],
18
  height: 'auto',
19
  colHeaders: true,
20
  rowHeaders: true,
21
  // individually add column hiding context menu items
22
  contextMenu: ['hidden_columns_show', 'hidden_columns_hide'],
23
  hiddenColumns: {
24
    columns: [3, 5, 9],
25
    indicators: true,
26
  },
27
  autoWrapRow: true,
28
  autoWrapCol: true,
29
});
```
Set up copy and paste behavior

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

To exclude hidden columns from copying and pasting, in the hiddenColumns object, set the copyPasteEnabled property to false:
JavaScript
```
1
import Handsontable from 'handsontable/base';
2
import { registerAllModules } from 'handsontable/registry';
3

4
// Register all Handsontable's modules.
5
registerAllModules();
6

7
const container = document.querySelector('#example6');
8

9
new Handsontable(container, {
10
  licenseKey: 'non-commercial-and-evaluation',
11
  data: [
12
    ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1', 'J1', 'K1', 'L1'],
13
    ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2', 'J2', 'K2', 'L2'],
14
    ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3', 'J3', 'K3', 'L3'],
15
    ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4', 'H4', 'I4', 'J4', 'K4', 'L4'],
16
    ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5', 'H5', 'I5', 'J5', 'K5', 'L5'],
17
  ],
18
  height: 'auto',
19
  colHeaders: true,
20
  rowHeaders: true,
21
  contextMenu: ['hidden_columns_show', 'hidden_columns_hide'],
22
  hiddenColumns: {
23
    columns: [3, 5, 9],
24
    indicators: true,
25
    // exclude hidden columns from copying and pasting
26
    copyPasteEnabled: false,
27
  },
28
  autoWrapRow: true,
29
  autoWrapCol: true,
30
});
```
TypeScript
```
1
import Handsontable from 'handsontable/base';
2
import { registerAllModules } from 'handsontable/registry';
3

4
// Register all Handsontable's modules.
5
registerAllModules();
6

7
const container = document.querySelector('#example6')!;
8

9
new Handsontable(container, {
10
  licenseKey: 'non-commercial-and-evaluation',
11
  data: [
12
    ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1', 'J1', 'K1', 'L1'],
13
    ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2', 'J2', 'K2', 'L2'],
14
    ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3', 'J3', 'K3', 'L3'],
15
    ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4', 'H4', 'I4', 'J4', 'K4', 'L4'],
16
    ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5', 'H5', 'I5', 'J5', 'K5', 'L5'],
17
  ],
18
  height: 'auto',
19
  colHeaders: true,
20
  rowHeaders: true,
21
  contextMenu: ['hidden_columns_show', 'hidden_columns_hide'],
22
  hiddenColumns: {
23
    columns: [3, 5, 9],
24
    indicators: true,
25
    // exclude hidden columns from copying and pasting
26
    copyPasteEnabled: false,
27
  },
28
  autoWrapRow: true,
29
  autoWrapCol: true,
30
});
```

Column hiding API methods

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

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

Access the `HiddenColumns` plugin instance

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

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

Hide a single column

To hide a single column, use the hideColumn() method:

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

3
plugin.hideColumn(4);
4

5
// re-render your Handsontable instance
6
hot.render();

Hide multiple columns

To hide multiple columns:

Either pass column indexes as arguments to the hideColumn() method
Or pass an array of column indexes to the hideColumns() method

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

3
plugin.hideColumn(0, 4, 6);
4
// or
5
plugin.hideColumns([0, 4, 6]);
6

7
// re-render your Handsontable instance
8
hot.render();

Unhide a single column

To unhide a single column, use the showColumn() method:

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

3
plugin.showColumn(4);
4

5
// re-render your Handsontable instance
6
hot.render();

Unhide multiple columns

To unhide multiple columns:

Either pass column indexes as arguments to the showColumn() method
Or pass an array of column indexes to the showColumns() method

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

3
plugin.showColumn(0, 4, 6);
4
// or
5
plugin.showColumns([0, 4, 6]);
6

7
// re-render your Handsontable instance
8
hot.render();