HiddenColumns

Plugin: 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

import { AfterViewInit, Component, ViewChild } from "@angular/core";
import {
  GridSettings,
  HotTableModule,
  HotTableComponent,
} from "@handsontable/angular-wrapper";

`@Component`({
  selector: "app-example",
  standalone: true,
  imports: [HotTableModule],
  template: ` <div>
    <hot-table [settings]="gridSettings" />
  </div>`,
})
export class ExampleComponent implements AfterViewInit {
  `@ViewChild`(HotTableComponent, { static: false })
  readonly hotTable!: HotTableComponent;

  readonly gridSettings = <GridSettings>{
    data: this.getData(),
    hiddenColumns: {
      copyPasteEnabled: true,
      indicators: true,
      columns: [1, 2, 5],
    },
  };

  ngAfterViewInit(): void {
    // Access the `HiddenColumns` plugin's instance
    const hot = this.hotTable.hotInstance;
    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();
  }

  private getData(): any[] {
    // Get some data
  }
}

Options

hiddenColumns

Source code

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:

• Plugins: HiddenColumns
• Column hiding

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

hiddenColumns.destroy()

Destroys the plugin instance.

disablePlugin

Source code

hiddenColumns.disablePlugin()

Disables the plugin functionality for this Handsontable instance.

enablePlugin

Source code

hiddenColumns.enablePlugin()

Enables the plugin functionality for this Handsontable instance.

getHiddenColumns

Source code

hiddenColumns.getHiddenColumns() ⇒ Array<number>

Returns an array of visual indexes of hidden columns.

hideColumn

Source code

hiddenColumns.hideColumn(…column)

Hides a single column.

Param	Type	Description
…column	number	Visual column index.

hideColumns

Source code

hiddenColumns.hideColumns(columns)

Hides the columns provided in the array.

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

isEnabled

Source code

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.

isHidden

Source code

hiddenColumns.isHidden(column) ⇒ boolean

Checks if the provided column is hidden.

Param	Type	Description
column	number	Visual column index.

isValidConfig

Source code

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

hiddenColumns.showColumn(…column)

Shows a single column.

Param	Type	Description
…column	number	Visual column index.

showColumns

Source code

hiddenColumns.showColumns(columns)

Shows the provided columns.

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

updatePlugin

Source code

hiddenColumns.updatePlugin()

Updates the plugin’s state.

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

• hiddenColumns