Skip to main content

DHTMLX Pivot. Expand and collapse all rows example

Demo of expanding and collapsing all rows in DHTMLX Pivot tree mode. Use the table API's exec method with open-row and close-row commands to toggle all nested rows programmatically.

Live example​

const widget = new pivot.Pivot("#pivot", {
    tableShape: {
        tree: true
    },
    fields,
    data: dataset,
    config: {
        rows: [
            "type",
            "studio"
        ],
        columns: [],
        values: [
            {
                field: "score",
                method: "max"
            },
            {
                field: "rank",
                method: "min"
            },
            {
                field: "members",
                method: "sum"
            },
             {
                field: "episodes",
                method: "count"
            },
        ]
    }
});

const api = widget.api;
const table = api.getTable();
//  setting all table branches closed on the table config update
api.intercept("render-table", ev => {
    ev.config.data.forEach(r => (r.open = false));

    // returning "false" here will prevent the table from rendering
    // return false;
});

function openAll() {
    table.exec("open-row", { id: 0, nested: true });
}

function closeAll() {
    table.exec("close-row", { id: 0, nested: true });
}
<!-- auxiliary controls for interacting with the sample -->
<link rel="stylesheet" href="https://snippet.dhtmlx.com/codebase/assets/css/auxiliary_controls.css">
<section class="dhx_sample-controls">
  <button class="dhx_sample-btn dhx_sample-btn--flat" onclick="openAll()">Open all</button>
  <button class="dhx_sample-btn dhx_sample-btn--flat" onclick="closeAll()">Close all</button>
</section>

<!-- component container -->
<div id="pivot" style="width: 100%; height: calc(100% - 60px);"></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 in tree mode display hierarchical data with expandable parent rows. When the dataset has many categories and subcategories, users need a quick way to expand or collapse the entire tree at once rather than clicking each parent row individually. This is especially useful for getting an overview of all data or resetting the view to show only top-level summaries.

DHTMLX Pivot provides programmatic control over tree row expansion through the table API. The table.exec("open-row", { id: 0, nested: true }) command expands all rows starting from the root, and table.exec("close-row", { id: 0, nested: true }) collapses them. The nested: true parameter ensures the operation applies recursively to all levels. Additionally, the render-table intercept lets you set the default open/closed state for all rows when the pivot configuration changes.

This example demonstrates expand/collapse controls on an anime dataset in tree mode. Types (Movie, Music, ONA, OVA, Special, TV) serve as parent rows with studios nested underneath. Two buttons - "Open all" and "Close all" - trigger the respective API commands. The render-table intercept sets all rows to closed by default, so the pivot starts in a collapsed state.

Solution overview​

To control row expansion, get the table API via widget.api.getTable(), then call table.exec() with "open-row" or "close-row" commands. Use api.intercept("render-table") to set the initial open/closed state for all rows.

The HTML section includes buttons to trigger the expand/collapse actions:

Key points​

  • Recursive expand/collapse: The nested: true parameter in table.exec() applies the open/close action to all nested levels, not just the immediate children
  • Root ID convention: Using id: 0 targets the virtual root node, ensuring all top-level and nested rows are affected by the command
  • Default state with intercept: The api.intercept("render-table") handler runs before each render, setting r.open = false on every row to ensure a collapsed default state after configuration changes
  • Separate table API: The widget.api.getTable() method returns the internal grid API, which provides the exec() method for direct table manipulation commands

API reference​

Additional resources​