Skip to content
RevoGrid [Pro]

Tree Data

The TreeData Plugin transforms parent-child relationships data into a hierarchical tree structure and provides the ability to group rows by parentId and is optimized for the best performance, making it suitable for large datasets. It enables features such as expandable rows, and level indicators, making it ideal for applications that handle nested data.

Source code
src/components/tree/Tree.ts
import { defineCustomElements } from '@revolist/revogrid/loader';
import { TreeDataPlugin } from '@revolist/revogrid-pro';
defineCustomElements();


import { currentTheme } from '../composables/useRandomData';
import { makeData } from '../composables/makeData';
const { isDark } = currentTheme();


export function load(parentSelector: string) {
  const grid = document.createElement('revo-grid');
  grid.range = true;
  grid.source = makeData(10, 3, 2).flatMap(v => [
    v,
    ...(v.subRows?.flatMap(v => [
      v,
      ...(v.subRows?.flatMap(v => [v]) || []),
    ]) || []),
  ]);


  grid.columns = [
    {
      name: 'Full Name',
      prop: 'fullName',
      size: 300,
      tree: true,
      cellTemplate: (h, { value, model }) => [
        h('img', {
          class: 'rounded mx-2',
          src: model.avatar,
          width: 20,
          height: 20,
        }),
        value,
      ],
    },
    {
      name: 'Birthday',
      prop: 'dateOfBirth',
      size: 150,
    },
  ];


  grid.plugins = [TreeDataPlugin];
  grid.theme = isDark() ? 'darkCompact' : 'compact';
  grid.hideAttribution = true;
  document.querySelector(parentSelector)?.appendChild(grid);
}

Key Features

  • Hierarchical Data Support: Automatically organizes flat data into a tree structure based on customizable id, parentId, and level fields.
  • Expandable Rows: Expand and collapse rows dynamically to reveal or hide child rows.
  • Customizable Templates: Supports tree-specific cell templates for better customization.
  • Root Parent Support: Define custom root parent identifiers for flexibility in tree structure.

Data Structure

Section titled “Data Structure”

To build the hierarchical tree structure, each data item must include the following fields:

  • id: A unique identifier for each row.
  • parentId: Links the item to its parent row. Root-level rows should use the rootParentId value (default: 'root').

Without these fields, the plugin cannot establish the necessary parent-child relationships for the tree structure.

const data = [
  { id: '1', parentId: 'root', name: 'Parent 1' },
  { id: '2', parentId: '1', name: 'Child 1.1' },
  { id: '3', parentId: '1', name: 'Child 1.2' },
  { id: '4', parentId: 'root', name: 'Parent 2' },
];

Additional Configuration Options

Section titled “Additional Configuration Options”

The plugin supports the following options for customization:

  • idField: Defines the field representing unique row identifiers. Default: ‘id’.
  • parentIdField: Specifies the field indicating parent row IDs. Default: ‘parentId’.
  • levelField: Sets the field to store hierarchy levels. Default: ‘level’.
  • rootParentId: Defines the identifier for root-level rows. Default: ‘root’.
  • expandedRowIds: A Set of row IDs to predefine expanded rows.

Example Configuration

Section titled “Example Configuration”

You can provide these options via revogrid.additionalData?.tree to customize the plugin’s behavior:

grid.additionalData = {
  tree: {
    idField: 'customId',
    parentIdField: 'customParentId',
    levelField: 'depth',
    rootParentId: null,
    expandedRowIds: new Set(['row1', 'row2']), // Pre-expanded rows
  },
};

By setting these options, you can adapt the plugin to different data structures and define default states for the tree.