Skip to main content

DHTMLX Pivot. Collapsible columns example

Demo of collapsible column headers in DHTMLX Pivot. Allow users to expand and collapse grouped column sections using headerShape.collapsible for interactive data exploration.

Live example​

const widget = new pivot.Pivot("#pivot", {
    fields,
    data: dataset,
    headerShape: {
        collapsible: true
    },
    config: {
        rows: [
            "studio",
            "genre"
        ],
        columns: [
          	"type"
        ],
        values: [
            {
                field: "title",
                method: "count"
            },
            {
                field: "score",
                method: "max"
            },
        ]
    }
});

<!-- component container -->
<div id="pivot" style="width: 100%; height: 100%;"></div>

<!-- dataset -->

<script>
const dataset = [
      {
        "rank": 1,
        "title": "Shingeki no Kyojin: The Final Season - Kanketsu-hen",
        "popularity": 609,
        "genre": "Action",
        "studio": "MAPPA",
        "type": "Special",
        "episodes": 2,
        "duration": 61,
        "members": 347875,
        "score": 9.17
      },
      {
        "rank": 2,
        "title": "Fullmetal Alchemist: Brotherhood",
        "popularity": 3,
        "genre": "Action",
        "studio": "Bones",
        "type": "TV",
        "episodes": 64,
        "duration": 24,
        "members": 3109951,
        "score": 9.11
      },
      // ... 246 more items (see Live Editor for full data)
    ]; 
    
    const fields = [
      {
        "id": "rank",
        "label": "Rank",
        "type": "number"
      },
      {
        "id": "title",
        "label": "Title",
        "type": "text"
      },
      {
        "id": "popularity",
        "label": "Popularity",
        "type": "number"
      },
      {
        "id": "genre",
        "label": "Genre",
        "type": "text"
      },
      {
        "id": "studio",
        "label": "Studio",
        "type": "text"
      },
      {
        "id": "type",
        "label": "Type",
        "type": "text"
      },
      {
        "id": "episodes",
        "label": "Episodes",
        "type": "number"
      },
      {
        "id": "duration",
        "label": "Duration",
        "type": "number"
      },
      {
        "id": "members",
        "label": "Members",
        "type": "number"
      },
      {
        "id": "score",
        "label": "Score",
        "type": "number"
      }
    ];
</script>

Pivot tables with column dimensions can display many value columns grouped under each category. When the "type" column contains values like "Movie", "TV", "Special", and "OVA", each group expands into multiple aggregated columns (count, max, etc.). This horizontal sprawl makes it difficult to focus on specific data segments.

DHTMLX Pivot provides the headerShape.collapsible property to make column group headers interactive. When enabled, users can click on a column group header to collapse it - hiding the detail columns and showing only the group label with a toggle indicator. Clicking again expands the group back to its full width.

This example demonstrates collapsible columns applied to an anime dataset grouped by type (Movie, TV, Special, etc.). Each type header becomes a toggle that hides or reveals the Title Count and Score Max columns beneath it. Use this approach when your pivot has many column groups and users need to focus on specific segments without horizontal scrolling.

Solution overview​

To enable collapsible columns, set the collapsible property to true inside the headerShape configuration object. This automatically adds expand/collapse controls to all column group headers defined by config.columns.

Key points​

  • Single property activation: Set headerShape.collapsible: true to enable - collapse controls are automatically added to all column group headers
  • Interactive data exploration: Users can click column headers to toggle visibility of grouped columns, focusing on the data that matters without reconfiguring the pivot
  • Works with any column dimension: The collapsible behavior applies to all values of the field defined in config.columns, creating toggles for each group automatically
  • Visual toggle indicator: Collapsed headers display an arrow indicator (">") showing the group can be expanded, providing clear affordance for user interaction

API reference​

Additional resources​