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

This page covers a non-latest version of Handsontable.

# CollapsibleColumns

# Description

The CollapsibleColumns plugin allows collapsing of columns, covered by a header with the colspan property defined.

Clicking the "collapse/expand" button collapses (or expands) all "child" headers except the first one.

Setting the Options#collapsiblecolumns property to true will display a "collapse/expand" button in every header with a defined colspan property.

To limit this functionality to a smaller group of headers, define the collapsibleColumns property as an array of objects, as in the example below.

Example

const container = document.getElementById('example');
const hot = new Handsontable(container, {
  data: generateDataObj(),
  colHeaders: true,
  rowHeaders: true,
  nestedHeaders: true,
  // enable plugin
  collapsibleColumns: true,
});

// or
const hot = new Handsontable(container, {
  data: generateDataObj(),
  colHeaders: true,
  rowHeaders: true,
  nestedHeaders: true,
  // enable and configure which columns can be collapsed
  collapsibleColumns: [
    {row: -4, col: 1, collapsible: true},
    {row: -3, col: 5, collapsible: true}
  ],
});

# Options

# collapsibleColumns

Source code (opens new window)

collapsibleColumns.collapsibleColumns : boolean | Array<object>

The collapsibleColumns option configures the CollapsibleColumns plugin.

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

Setting Description
false Disable the CollapsibleColumns plugin
true Enable the CollapsibleColumns plugin
An array of objects Enable the CollapsibleColumns plugin for selected column headers

Read more:

Default: undefined Example

// enable column collapsing for all headers
collapsibleColumns: true,

// enable column collapsing for selected headers
collapsibleColumns: [
  {row: -4, col: 1, collapsible: true},
  {row: -3, col: 5, collapsible: true}
],

# Methods

# collapseAll

Source code (opens new window)

collapsibleColumns.collapseAll()

Collapses all collapsible sections.

# collapseSection

Source code (opens new window)

collapsibleColumns.collapseSection(coords)

Collapses section at the provided coords.

Param Type Description
coords object Contains coordinates information. (coords.row, coords.col).

# destroy

Source code (opens new window)

collapsibleColumns.destroy()

Destroys the plugin instance.

# disablePlugin

Source code (opens new window)

collapsibleColumns.disablePlugin()

Disables the plugin functionality for this Handsontable instance.

# enablePlugin

Source code (opens new window)

collapsibleColumns.enablePlugin()

Enables the plugin functionality for this Handsontable instance.

# expandAll

Source code (opens new window)

collapsibleColumns.expandAll()

Expands all collapsible sections.

# expandSection

Source code (opens new window)

collapsibleColumns.expandSection(coords)

Expands section at the provided coords.

Param Type Description
coords object Contains coordinates information. (coords.row, coords.col).

# isEnabled

Source code (opens new window)

collapsibleColumns.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 CollapsibleColumns#enablePlugin method is called.

# toggleAllCollapsibleSections

Source code (opens new window)

collapsibleColumns.toggleAllCollapsibleSections(action)

Collapses or expand all collapsible sections, depending on the action parameter.

Param Type Description
action string 'collapse' or 'expand'.

# toggleCollapsibleSection

Source code (opens new window)

collapsibleColumns.toggleCollapsibleSection(coords, [action])

Collapses/Expands a section.

Emits: Hooks#event:beforeColumnCollapse, Hooks#event:beforeColumnExpand, Hooks#event:afterColumnCollapse, Hooks#event:afterColumnExpand

Param Type Description
coords Array Array of coords - section coordinates.
[action] string optional Action definition ('collapse' or 'expand').

# updatePlugin

Source code (opens new window)

collapsibleColumns.updatePlugin()

Updates the plugin's state.

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

Last Updated: Apr 19, 2024