Row Expand

Module Extensions

ColumnRegular (Extended from @revolist/revogrid)

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

---

AdditionalData (Extended from @revolist/revogrid)

interface AdditionalData {
  /**
       * Additional data for row expand
       *
       * @example
       * ```typescript
       * const grid = document.createElement('revo-grid');
       * grid.additionalData = {
       *   rowExpand: {
       *     expandedRows: new Set([1, 2, 3]),
       *   },
       * };
       * ```
       */
      rowExpand?: RowExpandConfig
}

---

HTMLRevoGridElementEventMap (Extended from global)

interface HTMLRevoGridElementEventMap {
  [ROW_EXPAND]: { rowIndex: number };
  [ROW_COLLAPSE]: { rowIndex: number };
  [ROW_EXPAND_ALL]?: undefined;
  [ROW_COLLAPSE_ALL]?: undefined
}

Plugin API

RowExpandPlugin

The RowExpandPlugin is a base plugin for row expansion functionality in RevoGrid. It provides core functionality for expanding/collapsing rows that can be used by other plugins like nested grid, row details, tree data etc.

Key Features:

• Expand/collapse individual rows
• Expand all rows at once
• Support for default expanded rows through config
• Events for row expansion state changes
• Extensible design for building more complex plugins

Usage Example:

import { RowExpandPlugin } from './row-expand/index';

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

// Configure through additionalData
grid.additionalData = {
  rowExpand: {
    // Rows to expand by default
    expandedRows: new Set([1, 2, 3]),
    // Height for expanded rows (optional)
    expandedRowHeight: 200,
    // Template for expanded content
    template: (h, props) => h('div', null, 'Expanded content')
  }
};

class RowExpandPlugin {
  /**
     * Expand a specific row
     */
  public expandRow(rowIndex: number);

  /**
     * Collapse a specific row
     */
  public collapseRow(rowIndex: number);

  /**
     * Expand all rows
     */
  public expandAllRows();

  /**
     * Collapse all rows
     */
  public collapseAllRows();
}

---

ExpandCellTemplate

Template function for rendering expand toggle in cells

ExpandCellTemplate: (toggleRowExpanded: (rowIndex: number) => void, isExpanded: (rowIndex: number) => boolean, config: RowExpandConfig | undefined, getRowModel: (rowIndex: number) => any) => CellTemplate;

---

RowExpandConfig

Configuration for row expansion

interface RowExpandConfig {
  /**
     * Set of row IDs that should be expanded by default
     */
    expandedRows?: Set<number>;
  /**
     * Height for expanded rows (optional)
     */
    expandedRowHeight?: number;
  /**
     * Controls visibility of expand toggle button on rows
     * - If boolean: hides expand toggle for all rows when true
     * - If function: allows conditional hiding based on row data
     * @param rowIndex The index of the row
     * @param model The row data model
     * @returns true to hide expand toggle, false to show it
     */
    hideExpand?: boolean | ((rowIndex: number, model: any) => boolean);
  /**
     * Template function for rendering expanded row content
     */
    template?: (h: any, props: any) => VNode
}

---

ExpansionConfig (Extended from row-expand.types.ts)

Configuration for expansion operation

interface ExpansionConfig {
  /**
     * Type of expansion operation to perform
     */
    operation: 'expand' | 'collapse' | 'toggle';
  target: ExpansionTarget;
  skipStateCheck?: boolean
}