# Row Expand Plugin
URL: https://pro.rv-grid.com/guides/data-manage/row-expand/
Source: src/content/docs/guides/data-manage/row-expand.mdx
Description: Learn how to use RowExpandPlugin for inline expandable row details.
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](/guides/data-manage/row-master/) 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.

Use `RowExpandPlugin` for inline detail rows that should stay in the normal grid flow. Use
[`MasterRowPlugin`](/guides/data-manage/row-master/) 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:

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

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

Configure expanded row behavior with `grid.rowExpand`:

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

```ts
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](/guides/data-manage/row-master/) or the [Row Master API](/api/row-master/).

## Example Use Cases

- Inline edit forms, as shown in the [Form Edit example](/guides/form-edit/).
- Nested grids inside expanded rows, as shown in the [Nested Grid guide](/guides/data-manage/nested-grid/).
- Compact row detail panels that do not need to span pinned columns or the full grid.
