JavaScript Data Grid HiddenColumns


The HiddenColumns plugin lets you hide specified columns.

"Hiding a column" means that the hidden column doesn't get rendered as a DOM element.

The HiddenColumns plugin doesn't modify the source data, and doesn't participate in data transformation (the shape of the data returned by the getData*() methods stays intact).

You can set the following configuration options:

Option Required Type Default Description
columns No Array - Hides specified columns by default
indicators No Boolean false Shows UI indicators
copyPasteEnabled No Boolean true Sets up copy/paste behavior


const container = document.getElementById('example');
const hot = new Handsontable(container, {
  data: getData(),
  hiddenColumns: {
    copyPasteEnabled: true,
    indicators: true,
    columns: [1, 2, 5]

// access the `HiddenColumns` plugin's instance
const hiddenColumnsPlugin = hot.getPlugin('hiddenColumns');

// hide a single column

// hide multiple columns
hiddenColumnsPlugin.hideColumn(1, 2, 9);

// hide multiple columns as an array
hiddenColumnsPlugin.hideColumns([1, 2, 9]);

// unhide a single column

// unhide multiple columns
hiddenColumnsPlugin.showColumn(1, 2, 9);

// unhide multiple columns as an array
hiddenColumnsPlugin.showColumns([1, 2, 9]);

// to see your changes, re-render your Handsontable instance



Source code (opens new window)

hiddenColumns.hiddenColumns : boolean | object

The hiddenColumns option configures the HiddenColumns plugin.

You can set the hiddenColumns option to one of the following:

Setting Description
false Disable the HiddenColumns plugin
true Enable the HiddenColumns plugin with the default plugin options
An object - Enable the HiddenColumns plugin
- Modify the plugin options

If you set the hiddenColumns to an object, you can set the following HiddenColumns plugin options:

Property Possible values Description
columns An array of indexes An array of indexes of columns that are hidden at initialization
copyPasteEnabled true | false true: when copying or pasting data, take hidden columns into account
false: when copying or pasting data, don't take hidden columns into account
indicators true | false true: display UI markers to indicate the presence of hidden columns
false: display UI markers

Read more:

Default: undefined

// enable the `HiddenColumns` plugin
hiddenColumns: true,

// enable `HiddenColumns` plugin, and modify the plugin options
hiddenColumns: {
  // set columns that are hidden by default
  columns: [5, 10, 15],
  // when copying or pasting data, take hidden columns into account
  copyPasteEnabled: true,
  // show where hidden columns are
  indicators: true



Source code (opens new window)


Destroys the plugin instance.


Source code (opens new window)


Disables the plugin functionality for this Handsontable instance.


Source code (opens new window)


Enables the plugin functionality for this Handsontable instance.


Source code (opens new window)

hiddenColumns.getHiddenColumns() ⇒ Array<number>

Returns an array of visual indexes of hidden columns.


Source code (opens new window)


Hides a single column.

Param Type Description
...column number Visual column index.


Source code (opens new window)


Hides the columns provided in the array.

Param Type Description
columns Array<number> Array of visual column indexes.


Source code (opens new window)

hiddenColumns.isEnabled() ⇒ boolean

Checks if the plugin is enabled in the handsontable settings. This method is executed in Hooks#beforeInit hook and if it returns true then the HiddenColumns#enablePlugin method is called.


Source code (opens new window)

hiddenColumns.isHidden(column) ⇒ boolean

Checks if the provided column is hidden.

Param Type Description
column number Visual column index.


Source code (opens new window)

hiddenColumns.isValidConfig(hiddenColumns) ⇒ boolean

Get if trim config is valid. Check whether all of the provided column indexes are within the bounds of the table.

Param Type Description
hiddenColumns Array List of hidden column indexes.


Source code (opens new window)


Shows a single column.

Param Type Description
...column number Visual column index.


Source code (opens new window)


Shows the provided columns.

Param Type Description
columns Array<number> Array of visual column indexes.


Source code (opens new window)


Updates the plugin's state.

This method is executed when updateSettings() is invoked with any of the following configuration options:

Last update: Apr 3, 2024