JavaScript Data Grid CollapsibleColumns

In this article

• Description
• Options
  • collapsibleColumns
• Methods
  • collapseAll
  • collapseSection
  • destroy
  • disablePlugin
  • enablePlugin
  • expandAll
  • expandSection
  • isEnabled
  • toggleAllCollapsibleSections
  • toggleCollapsibleSection
  • updatePlugin

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:

• Plugins: CollapsibleColumns

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

• collapsibleColumns
• nestedHeaders