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,
// enable plugin
collapsibleColumns: true,
});
// or
const hot = new Handsontable(container, {
data: generateDataObj(),
colHeaders: true,
rowHeaders: true,
// enable and configure which columns can be collapsed
collapsibleColumns: [
{row: -4, col: 1, collapsible: true},
{row: -3, col: 5, collapsible: true}
],
});
Methods
-
collapseAll()
-
Collapses all collapsible sections.
-
collapseSection(coords)
-
Collapses section at the provided coords.
Parameters:
Name Type Description coords
Object Contains coordinates information. (
coords.row
,coords.col
) -
destroy()
-
Destroys the plugin instance.
-
disablePlugin()
-
Disables the plugin functionality for this Handsontable instance.
-
enablePlugin()
-
Enables the plugin functionality for this Handsontable instance.
-
expandAll()
-
Expands all collapsible sections.
-
expandSection(coords)
-
Expands section at the provided coords.
Parameters:
Name Type Description coords
Object Contains coordinates information. (
coords.row
,coords.col
) -
isEnabled(){Boolean}
-
Checks if the plugin is enabled in the handsontable settings. This method is executed in
Hooks#beforeInit
hook and if it returnstrue
than theCollapsibleColumns#enablePlugin
method is called.Returns: {Boolean}
-
toggleAllCollapsibleSections(action)
-
Collapses or expand all collapsible sections, depending on the action parameter.
Parameters:
Name Type Description action
String 'collapse' or 'expand'.
-
toggleCollapsibleSection(coords, action)
-
Collapses/Expands a section.
Parameters:
Name Type Description coords
Object Section coordinates.
action
String Action definition ('collapse' or 'expand').