This page covers a non-latest version of Handsontable.
# NestedHeaders
# Description
The plugin allows to create a nested header structure, using the HTML's colspan attribute.
To make any header wider (covering multiple table columns), it's corresponding configuration array element should be
provided as an object with label
and colspan
properties. The label
property defines the header's label,
while the colspan
property defines a number of columns that the header should cover.
Note that the plugin supports a nested structure, which means, any header cannot be wider than it's "parent". In other words, headers cannot overlap each other.
Example
const container = document.getElementById('example');
const hot = new Handsontable(container, {
data: getData(),
nestedHeaders: [
['A', {label: 'B', colspan: 8}, 'C'],
['D', {label: 'E', colspan: 4}, {label: 'F', colspan: 4}, 'G'],
['H', {label: 'I', colspan: 2}, {label: 'J', colspan: 2}, {label: 'K', colspan: 2}, {label: 'L', colspan: 2}, 'M'],
['N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W']
],
# Options
# nestedHeaders
Source code (opens new window)nestedHeaders.nestedHeaders : Array<Array>
Allows creating a nested header structure, using the HTML's colspan attribute.
Default: undefined
Example
nestedHeaders: [
['A', {label: 'B', colspan: 8}, 'C'],
['D', {label: 'E', colspan: 4}, {label: 'F', colspan: 4}, 'G'],
['H', 'I', 'J', 'K', 'L', 'M', 'N', 'R', 'S', 'T']
],
# Members
# detectedOverlappedHeaders
Source code (opens new window)nestedHeaders.detectedOverlappedHeaders : boolean
The flag which determines that the nested header settings contains overlapping headers configuration.
# Methods
# destroy
Source code (opens new window)nestedHeaders.destroy()
Destroys the plugin instance.
# disablePlugin
Source code (opens new window)nestedHeaders.disablePlugin()
Disables the plugin functionality for this Handsontable instance.
# enablePlugin
Source code (opens new window)nestedHeaders.enablePlugin()
Enables the plugin functionality for this Handsontable instance.
# isEnabled
Source code (opens new window)nestedHeaders.isEnabled() ⇒ boolean
Check if plugin is enabled.
# updatePlugin
Source code (opens new window)nestedHeaders.updatePlugin()
Updates the plugin state. This method is executed when Core#updateSettings is invoked.