Skip to main content

DHTMLX Pivot. Tree mode example

Demo of tree mode in DHTMLX Pivot. Display multiple row fields as a collapsible tree hierarchy using tableShape.tree: true, allowing users to expand and collapse nested groups for drill-down data exploration.

Live example​

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

<!-- 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 multiple row fields display each field as a separate column by default, which works well for flat layouts but can be hard to navigate when there are many grouping levels. Users scanning through studios and genres need a way to focus on one studio at a time without being overwhelmed by all expanded rows.

The tableShape.tree property switches the row layout from flat columns to a collapsible tree structure. When enabled, the first row field becomes the top-level group with expand/collapse controls, and subsequent row fields appear as nested children. This creates a familiar drill-down interface similar to file explorers or org charts.

This example uses an anime dataset grouped by studio and genre. With tree mode enabled, each studio appears as a collapsible parent node, and genres appear indented beneath. The values show title count, max score, episode count, min rank, and max members - all aggregated per studio-genre combination.

Solution overview​

Set tableShape.tree: true to switch from a flat multi-column row layout to a collapsible tree hierarchy. The order of fields in the rows array determines the nesting level - the first field becomes the top-level parent.

Key points​

  • Single-column tree: Setting tree: true merges all row fields into one column with expand/collapse controls, replacing the default flat multi-column layout
  • Nesting order: The order of fields in the rows array defines the hierarchy - "studio" at index 0 becomes the parent and "genre" at index 1 becomes the child level
  • Value templates: Use tableShape.templates to control how aggregated values render - passing (v) => v preserves raw numeric values without rounding or formatting
  • Auto-width for tree column: Enable columnShape.autoWidth on the first row field to ensure the tree column is wide enough to display indented labels without truncation

API reference​

  • Pivot tableShape: Configuration for table appearance including tree mode and cell templates.
  • Pivot columnShape: Configuration for column behavior including auto-width settings.
  • Pivot configuration: Properties for defining rows, columns, and value aggregations.

Additional resources​