Skip to content

Tree

Module Extensions

ColumnRegular (Extended from @revolist/revogrid)

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

AdditionalData (Extended from @revolist/revogrid)

interface AdditionalData {
/**
* Additional data property tree
*
* @example
* ```typescript
* const grid = document.createElement('revo-grid');
* grid.additionalData = {
* tree: {
* idField: 'id',
* parentIdField: 'parentId',
* rootParentId: null,
* expandedRowIds: new Set(),
* },
* };
* ```
*/
tree?: {
idField?: string;
parentIdField?: string;
rootParentId?: any;
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
},
];
class TreeDataPlugin {
/**
* Toggle the expanded state for a row and then re-calculate tree metadata.
*/
toggleRowExpanded(row: DataType);
/**
* 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[];
}

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;

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
}