Tutorial: Collapsing columns

Collapsing columns


The Collapsible Columns plugin enables collapsing columns, covered by a header with the colspan property defined.
The plugin adds a "expand/collapse" button multi-column headers (created with the Nested Headers plugin). Clicking these buttons will collapse (or expands) all "child" headers, leaving the first one visible.

Node: You'll need to enable the Nested Headers and Hidden Columns plugins in order for this plugin to work properly.

Setup and configuration

To enable the Collapsible Columns plugin, you can either set the collapsibleColumns property to:

  • true - this will enable the functionality for all multi-column headers. (Every column with the colspan attribute defined will be extended with the "expand/collapse" button)
  • an array of objects containing information about which headers should have the "expand/collapse" buttons. The structure in this case looks like this:
    collapsibleColumns: [
      {row: -4, col: 1, collapsible: true}, // Add the button to the 4th-level (counting from the first table row upwards) header of the 1st column.
      {row: -3, col: 5, collapsible: true} // Add the button to the 3rd-level (counting from the first table row upwards) header of the 5th column.


Help us improve this page