Skip to content

Tree

ColumnRegular (Extended from @revolist/revogrid)

Section titled “ColumnRegular (Extended from @revolist/revogrid)”
interface ColumnRegular {
/**
* Enables tree template on cells
*/
tree?: boolean
}

AdditionalData (Extended from @revolist/revogrid)

Section titled “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>;
}
}

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[];
}

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;

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
}