React Data Grid CollapsibleColumns

Description
Options
- collapsibleColumns
Methods

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

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:

← BindRowsWithHeaders ColumnSorting →