Row Expand

Module Extensions

ColumnRegular (Extended from @revolist/revogrid)

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

---

HTMLRevoGridElement (Extended from global)

interface HTMLRevoGridElement {
  rowExpand?: RowExpandConfig;
  'row-expand'?: RowExpandConfig
}

---

AdditionalData (Extended from @revolist/revogrid)

interface AdditionalData {
  /**
       * Additional data for row expand
       * @deprecated Use `grid.rowExpand` instead.
       *
       * @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 lightweight row-detail plugin for RevoGrid. It expands a regular row by inserting a second virtual row that points to the same physical row and renders custom content from rowExpand.template. Use it when the detail content can live as an inline row inside the regular grid flow, such as a nested grid, row form, compact detail panel, or any row-local custom content.

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 inline row-detail content

RowExpandPlugin vs MasterRowPlugin

Both plugins support expandable row details, but they solve different layout problems:

• RowExpandPlugin renders an inline expanded row in the normal row viewport. It is the simpler option when the expanded content should stay inside the regular grid columns and scroll with the rows.
• MasterRowPlugin renders master-detail content through its auto-installed OverlayPlugin, tracks viewport scrolling, and can span the detail area across the grid, including pinned areas. Use it for full-width, overlay-based master-detail layouts that need richer alignment behavior.

For master-detail rows, see the Master Rows guide and Row Master API.

Usage Example:

import { RowExpandPlugin } from '@revolist/revogrid-pro';

const grid = document.createElement('revo-grid');
grid.plugins = [RowExpandPlugin];
grid.columns = [
  { prop: 'name', name: 'Name', expand: true },
  { prop: 'status', name: 'Status' },
];

grid.rowExpand = {
  // Physical row indexes 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, `Details for ${props.model.name}`)
};

Dependencies

• Event integration EVENT_BEFORE_SORTING, EVENT_AFTER_SORTING, BEFORE_FILTER_EVENT, AFTER_FILTER_EVENT, AFTER_SOURCE_SET_EVENT: Integrates with grid lifecycle events to preserve expanded row state.
• Config integration additionalData.rowExpand: Reads legacy row expansion configuration from additionalData.rowExpand.

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<DataType<any, ColumnProp>>;

---

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
}