NestedHeaders

Plugin: NestedHeaders

Description

The plugin allows to create a nested header structure, using the HTML’s colspan and rowspan attributes.

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.

To make any header taller (covering multiple header rows), provide a rowspan property that defines the number of header rows that the header should span. Cells covered by a rowspan can use an empty string '' in the corresponding positions in the lower header rows, but those placeholders are optional.

You can also set custom class names to any of the headers by providing the headerClassName property.

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, headerClassName: 'htRight'}, '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

nestedHeaders.nestedHeaders : boolean | Array<Array>

The nestedHeaders option configures the NestedHeaders plugin.

You can set the nestedHeaders option to one of the following:

Setting	Description
false (default)	Disable the NestedHeaders plugin
true	- Enable the NestedHeaders plugin - Don’t configure any nested headers
Array of arrays	- Enable the NestedHeaders plugin - Configure headers that are nested on Handsontable’s initialization

If you set the nestedHeaders option to an array of arrays, each array configures one set of nested headers.

Each array element configures one header, and can be one of the following:

Array element	Description
A string	The header’s label
An object	Properties: label (string): the header’s label colspan (integer): number of data columns the header spans rowspan (integer): number of header rows the header spans headerClassName (string): optional space-separated CSS class names

Tip

When nestedHeaders is configured, the label defined in the columns option for the same column is replaced by the label from nestedHeaders. The nestedHeaders label takes precedence.

Read more:

• Plugins: NestedHeaders
• Column groups: Nested headers

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

nestedHeaders.detectedOverlappedHeaders : boolean

The flag which determines that the nested header settings contains overlapping headers configuration.

Methods

destroy

Source code

nestedHeaders.destroy()

Destroys the plugin instance.

disablePlugin

Source code

nestedHeaders.disablePlugin()

Disables the plugin functionality for this Handsontable instance.

enablePlugin

Source code

nestedHeaders.enablePlugin()

Enables the plugin functionality for this Handsontable instance.

isEnabled

Source code

nestedHeaders.isEnabled() ⇒ boolean

Check if plugin is enabled.

updatePlugin

Source code

nestedHeaders.updatePlugin()

Updates the plugin’s state.

This method is executed when updateSettings() is invoked with any of the following configuration options:

• nestedHeaders