JavaScript Data GridCollapsibleColumns

On this page

• 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

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

collapsibleColumns.collapseAll()

Collapses all collapsible sections.

collapseSection

Source code

collapsibleColumns.collapseSection(coords)

Collapses section at the provided coords.

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

destroy

Source code

collapsibleColumns.destroy()

Destroys the plugin instance.

disablePlugin

Source code

collapsibleColumns.disablePlugin()

Disables the plugin functionality for this Handsontable instance.

enablePlugin

Source code

collapsibleColumns.enablePlugin()

Enables the plugin functionality for this Handsontable instance.

expandAll

Source code

collapsibleColumns.expandAll()

Expands all collapsible sections.

expandSection

Source code

collapsibleColumns.expandSection(coords)

Expands section at the provided coords.

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

isEnabled

Source code

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

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

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

collapsibleColumns.updatePlugin()

Updates the plugin's state.

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

• collapsibleColumns
• nestedHeaders