React Data GridCollapsibleColumns

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

<HotTable
  data={generateDataObj()}
  colHeaders={true}
  rowHeaders={true}
  nestedHeaders={true}
  // enable plugin
  collapsibleColumns={true}
/>

// or
<HotTable
  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:

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: