# Row Expand
URL: https://pro.rv-grid.com/api/row-expand/
Source: src/content/docs/api/row-expand.md
## Module Extensions

### `ColumnRegular` (Extended from `@revolist/revogrid`)

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

---

### `HTMLRevoGridElement` (Extended from `global`)

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

---

### `AdditionalData` (Extended from `@revolist/revogrid`)

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

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

Usage Example:
```ts
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.

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

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

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

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