Tutorial: Nested headers

Nested headers

Edit on GitHub


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.


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