Collapsing columns


Overview

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 plugin in order for this plugin to work properly.

Note: Please keep in mind that collapsed rows are included in a DataMap (gets by the getData method), but they aren't rendered.

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

Example

Edit this page

Tutorial: Collapsing columns