JavaScript Data Grid 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 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:

Last update: Mar 6, 2024