Row Expand Plugin

The RowExpandPlugin adds inline expandable detail rows to RevoGrid. It is useful when a row needs a compact secondary area for a form, nested grid, notes, preview content, or any row-local custom template.

Unlike the Master Rows feature, RowExpandPlugin does not render a master-detail overlay. It inserts an expanded row into the regular row viewport and renders your rowExpand.template inside that row.

Choosing the right plugin

Use RowExpandPlugin for inline detail rows that should stay in the normal grid flow. Use MasterRowPlugin when the detail area must span the grid, stay aligned through overlay rendering, or work as a full master-detail view across pinned areas.

Basic Setup

Import the plugin and add it to the grid:

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

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

Add expand: true to the column that should render the expand toggle:

grid.columns = [
  { prop: 'name', name: 'Name', expand: true },
  { prop: 'status', name: 'Status' },
];

Configure expanded row behavior with grid.rowExpand:

grid.rowExpand = {
  expandedRows: new Set([0]),
  expandedRowHeight: 220,
  template: (h, props) =>
    h('div', { class: 'row-detail' }, [
      h('strong', null, props.model.name),
      h('p', null, props.model.description),
    ]),
};

Configuration

| Option | Type | Description | | ------ | ---- | ----------- | | expandedRows | Set<number> | Physical row indexes that should be expanded by default. | | expandedRowHeight | number | Height, in pixels, for each expanded detail row. | | hideExpand | boolean \| ((rowIndex: number, model: any) => boolean) | Hides the expand toggle for all rows or for specific rows. Return true to hide the toggle. | | template | (h: any, props: any) => VNode | Renders the expanded row content. The template receives the row model and render context. |

additionalData.rowExpand is still supported for compatibility, but prefer the direct grid.rowExpand property.

Programmatic Expansion

The plugin listens for row expansion events:

import {
  ROW_COLLAPSE,
  ROW_COLLAPSE_ALL,
  ROW_EXPAND,
  ROW_EXPAND_ALL,
} from '@revolist/revogrid-pro';

grid.dispatchEvent(new CustomEvent(ROW_EXPAND, { detail: { rowIndex: 0 } }));
grid.dispatchEvent(new CustomEvent(ROW_COLLAPSE, { detail: { rowIndex: 0 } }));
grid.dispatchEvent(new CustomEvent(ROW_EXPAND_ALL));
grid.dispatchEvent(new CustomEvent(ROW_COLLAPSE_ALL));

The rowIndex value is the virtual row index at the time the event is dispatched.

Difference From Master Rows

RowExpandPlugin and MasterRowPlugin both expose expandable row experiences, but their rendering models are different:

| Capability | RowExpandPlugin | MasterRowPlugin | | ---------- | --------------- | --------------- | | Rendering model | Inline expanded row in the regular row viewport | Overlay-rendered master-detail row | | Required plugins | RowExpandPlugin | MasterRowPlugin (OverlayPlugin is auto-installed) | | Toggle setup | Set expand: true on a column | Use EXPAND_COLUMN or dispatch ROW_MASTER | | Best for | Nested grids, row forms, compact detail rows | Full-width master-detail content and pinned-area spanning layouts | | Layout scope | Constrained by regular grid row and columns | Can span across the grid through overlay rendering |

For the overlay-based master-detail implementation, read the Master Rows guide or the Row Master API.

Example Use Cases

• Inline edit forms, as shown in the Form Edit example.
• Nested grids inside expanded rows, as shown in the Nested Grid guide.
• Compact row detail panels that do not need to span pinned columns or the full grid.