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.