RevoGrid

Appearance

Module Extensions ​

ColumnRegular (Extended from @revolist/revogrid) ​

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

AdditionalData (Extended from @revolist/revogrid) ​

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

HTMLRevoGridElementEventMap (Extended from global) ​

ts
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:

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

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.

ts
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.

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

TreeRowSelectEvent ​

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

ts
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
}