JavaScript Data Grid NestedHeaders

Description
Options
- nestedHeaders
Members
- detectedOverlappedHeaders
Methods

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

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

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']
],