Nested headers


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

Limitations

The maximum number for colspan value of nested headers is 1000. This constraint is based on HTML table specification which sets the limit of colspan to 1000.

Edit this page

Tutorial: Nested headers