Nested headers

• Overview
• Setup
• Example

Overview

The Nested Rows plugin allows creating a nested header structure, using the colspan attribute.

Note: the plugin supports a nested structure, which means that a header cannot be wider than its "parent" element. In other words, headers cannot overlap each other.

Setup

To make a header wider (covering multiple columns), its 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 the number of columns that the header should cover.

For example:

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

Example

var example1 = document.getElementById('example1');

var hot = new Handsontable(example1, {
  data: Handsontable.helper.createSpreadsheetData(5,10),
  colHeaders: true,
  rowHeaders: true,
  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']
  ]
});