This page covers a non-latest version of Handsontable.
# HiddenColumns
# Description
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 |
Example
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
hiddenColumnsPlugin.hideColumn(1);
// hide multiple columns
hiddenColumnsPlugin.hideColumn(1, 2, 9);
// hide multiple columns as an array
hiddenColumnsPlugin.hideColumns([1, 2, 9]);
// unhide a single column
hiddenColumnsPlugin.showColumn(1);
// 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
hot.render();
# Options
# hiddenColumns
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 accountfalse: 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 columnsfalse: display UI markers |
Read more:
Default: undefined Example
// 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
}
# Methods
# destroy
Source code (opens new window)hiddenColumns.destroy()
Destroys the plugin instance.
# disablePlugin
Source code (opens new window)hiddenColumns.disablePlugin()
Disables the plugin functionality for this Handsontable instance.
# enablePlugin
Source code (opens new window)hiddenColumns.enablePlugin()
Enables the plugin functionality for this Handsontable instance.
# getHiddenColumns
Source code (opens new window)hiddenColumns.getHiddenColumns() ⇒ Array<number>
Returns an array of visual indexes of hidden columns.
# hideColumn
Source code (opens new window)hiddenColumns.hideColumn(...column)
Hides a single column.
| Param | Type | Description |
|---|---|---|
| ...column | number | Visual column index. |
# hideColumns
Source code (opens new window)hiddenColumns.hideColumns(columns)
Hides the columns provided in the array.
| Param | Type | Description |
|---|---|---|
| columns | Array<number> | Array of visual column indexes. |
# isEnabled
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 than the HiddenColumns#enablePlugin method is called.
# isHidden
Source code (opens new window)hiddenColumns.isHidden(column) ⇒ boolean
Checks if the provided column is hidden.
| Param | Type | Description |
|---|---|---|
| column | number | Visual column index. |
# isValidConfig
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. |
# showColumn
Source code (opens new window)hiddenColumns.showColumn(...column)
Shows a single column.
| Param | Type | Description |
|---|---|---|
| ...column | number | Visual column index. |
# showColumns
Source code (opens new window)hiddenColumns.showColumns(columns)
Shows the provided columns.
| Param | Type | Description |
|---|---|---|
| columns | Array<number> | Array of visual column indexes. |
# updatePlugin
Source code (opens new window)hiddenColumns.updatePlugin()
Updates the plugin's state.
This method is executed when updateSettings() is invoked with any of the following configuration options:
← Formulas HiddenRows →