Tree

Module Extensions

ColumnRegular (Extended from @revolist/revogrid)

interface ColumnRegular {
  /**
       * Enables tree template on cells
       */
      tree?: boolean
}

---

HTMLRevoGridElement (Extended from global)

interface HTMLRevoGridElement {
  tree?: TreeConfig
}

---

AdditionalData (Extended from @revolist/revogrid)

interface AdditionalData {
  /**
       * Additional data property tree
       * @deprecated Use `grid.tree` instead.
       *
       * @example
       * ```typescript
       * const grid = document.createElement('revo-grid');
       * grid.additionalData = {
       *   tree: {
       *     idField: 'id',
       *     parentIdField: 'parentId',
       *     rootParentId: null,
       *     expandAll: true,
       *     expandedRowIds: new Set(),
       *   },
       * };
       * ```
       */
      tree?: TreeConfig
}

---

HTMLRevoGridElementEventMap (Extended from global)

interface HTMLRevoGridElementEventMap {
  [TREE_ROW_SELECT_EVENT]: TreeRowSelectEvent;
  [TREE_TOGGLE_EVENT]: { rowId: any };
  [TREE_EXPAND_ALL_EVENT]: undefined;
  [TREE_COLLAPSE_ALL_EVENT]: undefined;
  [TREE_STATE_CHANGED_EVENT]: { expandedRowIds: Set<any> }
}

Plugin API

TreeDataPlugin

The TreeDataPlugin now uses Revogrid’s row trimming mechanism without modifying the original data.

All tree metadata (level, expanded, hasChildren, visible) is computed separately and stored in a Map. The plugin builds a parent→children mapping from the original flat data and then recursively computes, for each row, its tree level and whether it should be visible based on the expanded/collapsed state of its ancestors.

The cell template uses a supplied “getMeta” function to look up computed tree metadata for rendering (indentation and expand/collapse icons) without changing the underlying row.

Usage Example:

import { TreeDataPlugin } from './tree/index';

const grid = document.createElement('revo-grid');
grid.plugins = [TreeDataPlugin];

grid.columns = [
  {
    prop: 'treeColumn',
    name: 'Hierarchy',
    tree: true,
    cellTemplate: TreeCellTemplate, // or you can let the plugin override it
  },
];

Dependencies

• Event integration RowOrderPlugin: Integrates with RowOrderPlugin row order events to reparent tree rows after drag and drop.
• Event integration RowSelectPlugin: Integrates with RowSelectPlugin row selection events for parent and descendant selection.

class TreeDataPlugin {
  /**
     * Recomputes the tree metadata for every row in the original data and builds a trimmed map.
     * Call this method after the original data/order/visibility/set changes
     *
     * This method builds a parent→children mapping (without modifying the original data) and then
     * recursively computes for each row:
     *  - its level (indentation),
     *  - whether it is expanded (based on the expandedRowIds set),
     *  - whether it has children,
     *  - and whether it should be visible (i.e. none of its ancestors are collapsed).
     *
     * The trimmed map is then applied via providers.data.setTrimmed().
     */
  updateTree();

  /**
     * Toggle the expanded state for a row and then re-calculate tree metadata.
     */
  toggleRowExpanded(row: DataType);

  getExpandedRowIds();

  toggleRowExpandedById(rowId: any);

  expandAll();

  collapseAll();

  /**
     * Gets all descendant row IDs (children, grandchildren, etc.) for a given row
     * @param rowId - The ID of the row to get descendants for
     * @returns Array of physical indices of all descendant rows
     */
  public getAllDescendantPhysicalIndices(rowId: any): number[];
}

---

TreeMeta

This is the shape of computed tree metadata. Notice that nothing is stored on the row itself.

interface TreeMeta {
  level: number;
  expanded: boolean;
  hasChildren: boolean;
  visible: boolean;
  parentId: any
}

---

TreeConfig

interface TreeConfig {
  idField?: string;
  parentIdField?: string;
  rootParentId?: any;
  expandAll?: boolean;
  expandedRowIds?: Set<any>
}

---

TreeRowSelectEvent

Event emitted when a tree row with children is selected. This event allows for custom handling of parent-child selection relationships.

interface TreeRowSelectEvent {
  /** The row type (e.g., 'rgRow') */
    type: DimensionRows;
  /** The physical index of the parent row in the source data */
    parentIndex: number;
  /** Array of physical indices of all descendant rows */
    childrenIndices: number[];
  /** The original row selection event that triggered this tree selection */
    originalEvent?: any
}

---

TreeCellTemplate

The TreeCellTemplate now receives an extra “getMeta” callback that provides the computed tree metadata for the given row. It does not assume that any tree information has been stored on the row itself.

TreeCellTemplate: (toggleRowExpanded: (data: DataType) => void, getMeta: (row: DataType) => TreeMeta) => CellTemplate;