HiddenRows

Plugin: HiddenRows

Description

The HiddenRows plugin lets you hide specified rows.

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

The HiddenRows 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
rows	No	Array	-	Hides specified rows 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(),
    hiddenRows: {
      copyPasteEnabled: true,
      indicators: true,
      rows: [1, 2, 5],
    },
  };

  ngAfterViewInit(): void {
    // Access the `HiddenRows` plugin's instance
    const hot = this.hotTable.hotInstance;
    const hiddenRowsPlugin = hot.getPlugin("hiddenRows");

    // Hide a single row
    hiddenRowsPlugin.hideRow(1);

    // Hide multiple rows
    hiddenRowsPlugin.hideRow(1, 2, 9);

    // Hide multiple rows as an array
    hiddenRowsPlugin.hideRows([1, 2, 9]);

    // Unhide a single row
    hiddenRowsPlugin.showRow(1);

    // Unhide multiple rows
    hiddenRowsPlugin.showRow(1, 2, 9);

    // Unhide multiple rows as an array
    hiddenRowsPlugin.showRows([1, 2, 9]);

    // To see your changes, re-render your Handsontable instance
    hot.render();
  }

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

Options

hiddenRows

Source code

hiddenRows.hiddenRows : boolean | object

The hiddenRows option configures the HiddenRows plugin.

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

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

If you set the hiddenRows to an object, you can set the following HiddenRows plugin options:

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

Read more:

• Plugins: HiddenRows
• Row hiding

Default: undefined
Example

// enable the `HiddenRows` plugin
hiddenRows: true,

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

Methods

destroy

Source code

hiddenRows.destroy()

Destroys the plugin instance.

disablePlugin

Source code

hiddenRows.disablePlugin()

Disables the plugin functionality for this Handsontable instance.

enablePlugin

Source code

hiddenRows.enablePlugin()

Enables the plugin functionality for this Handsontable instance.

getHiddenRows

Source code

hiddenRows.getHiddenRows() ⇒ Array<number>

Returns an array of visual indexes of hidden rows.

hideRow

Source code

hiddenRows.hideRow(…row)

Hides the row provided as row index (counting from 0).

Param	Type	Description
…row	number	Visual row index.

hideRows

Source code

hiddenRows.hideRows(rows)

Hides the rows provided in the array.

Param	Type	Description
rows	Array<number>	Array of visual row indexes.

isEnabled

Source code

hiddenRows.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 HiddenRows#enablePlugin method is called.

isHidden

Source code

hiddenRows.isHidden(row) ⇒ boolean

Checks if the provided row is hidden.

Param	Type	Description
row	number	Visual row index.

isValidConfig

Source code

hiddenRows.isValidConfig(hiddenRows) ⇒ boolean

Checks whether all of the provided row indexes are within the bounds of the table.

Param	Type	Description
hiddenRows	Array	List of hidden visual row indexes.

showRow

Source code

hiddenRows.showRow(…row)

Shows the row provided as row index (counting from 0).

Param	Type	Description
…row	number	Visual row index.

showRows

Source code

hiddenRows.showRows(rows)

Shows the rows provided in the array.

Param	Type	Description
rows	Array<number>	Array of visual row indexes.

updatePlugin

Source code

hiddenRows.updatePlugin()

Updates the plugin’s state.

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

• hiddenRows