This page covers a next version of Handsontable, and is not published yet.

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.


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>

The nestedHeaders option configures the NestedHeaders plugin.

You can 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): the column width

Read more:

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)


Destroys the plugin instance.

# disablePlugin

Source code (opens new window)


Disables the plugin functionality for this Handsontable instance.

# enablePlugin

Source code (opens new window)


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)


Updates the plugin state. This method is executed when Core#updateSettings is invoked.

Last Updated: Apr 19, 2024