This page covers a next version of Handsontable, and is not published yet.

This page covers a non-latest version of Handsontable.

# 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

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

// access the `HiddenRows` plugin's instance
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();

# Options

# hiddenRows

Source code (opens new window)

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:

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 (opens new window)

hiddenRows.destroy()

Destroys the plugin instance.

# disablePlugin

Source code (opens new window)

hiddenRows.disablePlugin()

Disables the plugin functionality for this Handsontable instance.

# enablePlugin

Source code (opens new window)

hiddenRows.enablePlugin()

Enables the plugin functionality for this Handsontable instance.

# getHiddenRows

Source code (opens new window)

hiddenRows.getHiddenRows() ⇒ Array<number>

Returns an array of visual indexes of hidden rows.

# hideRow

Source code (opens new window)

hiddenRows.hideRow(...row)

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

Param Type Description
...row number Visual row index.

# hideRows

Source code (opens new window)

hiddenRows.hideRows(rows)

Hides the rows provided in the array.

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

# isEnabled

Source code (opens new window)

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

# isHidden

Source code (opens new window)

hiddenRows.isHidden(row) ⇒ boolean

Checks if the provided row is hidden.

Param Type Description
row number Visual row index.

# isValidConfig

Source code (opens new window)

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 (opens new window)

hiddenRows.showRow(...row)

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

Param Type Description
...row number Visual row index.

# showRows

Source code (opens new window)

hiddenRows.showRows(rows)

Shows the rows provided in the array.

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

# updatePlugin

Source code (opens new window)

hiddenRows.updatePlugin()

Updates the plugin state. This method is executed when Core#updateSettings is invoked.

Last Updated: Apr 19, 2024