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

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

```ts
interface HTMLRevoGridElement {
  masterRow?: RowMasterConfig;
  'master-row'?: RowMasterConfig
}
```

---

### `HTMLRevoGridElementEventMap` (Extended from `global`)

```ts
interface HTMLRevoGridElementEventMap {
  /**
       * Toggles one master detail row from a cell payload, or applies desired states for multiple rows.
       */
      [ROW_MASTER]: RowMasterEvent;
  /**
       * Fired before automatic master-row cleanup collapses expanded rows. Call preventDefault() to keep rows expanded.
       */
      [BEFORE_ROW_MASTER_COLLAPSE]: RowMasterBeforeCollapseEvent
}
```

---

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

```ts
interface AdditionalData {
  /**
      * Additional data property for row master configuration
      * @example
      * {
      *   masterRow: {
      *     prop: 'masterDetail',
      *     name: 'Details',
      *     cellTemplate: (h, data) => {
      *       // Custom rendering logic for master rows
      *       return h('div', { class: 'detail-content' }, 'Detail view content');
      *     },
      *   },
      * }
      * @deprecated Use the direct `grid.masterRow` property instead.
      */
      masterRow?: RowMasterConfig
}
```

## Plugin API

### `EXPAND_COLUMN`

```ts
EXPAND_COLUMN: {
  size: number;
  readonly: true;
  cellProperties: () => { class: string; };
  cellTemplate: (h: HyperFunc<VNode>, data: CellTemplateProp<DataType<any, ColumnProp>, ColumnRegular<ColumnProp, DataType<any, ColumnProp>>, ColumnProp>) => VNode;
};
```

---

### `MasterRowPlugin`

The `MasterRowPlugin` is a RevoGrid plugin designed to manage and render master-detail rows within the grid.
It provides functionalities to expand and collapse rows, offering a detailed view for selected rows, enhancing
data presentation and interaction in scenarios where hierarchical data representation is required.

**Key Features**:
- **Row Expansion/Collapse**: Allows users to expand or collapse master rows to reveal or hide additional
  details, facilitating a hierarchical view of the data.
- **Event-Driven Interactions**: Subscribes to and dispatches a range of events, including `ROW_MASTER`,
  `AFTER_GRID_RENDER_EVENT`, `BEFORE_ROW_RENDER_EVENT`, and more, to maintain and update row states and visuals.
- **Customizable Templates**: Supports configurable templates for rendering detailed row content using
  the `RowMasterConfig`, providing flexibility in how detail views are presented.
- **Efficient DOM Management**: Handles overlay nodes for expanded rows, ensuring that DOM manipulation
  is optimized for performance.
- **Viewport Synchronization**: Continuously verifies and updates the expansion state of rows in response
  to viewport changes, ensuring consistency with user interactions and data state.

**Usage**:
- Integrate this plugin into a RevoGrid instance to enable master-detail row functionalities. Add the plugin
  to the grid's plugins array to activate its features.

### Example
```typescript
import { MasterRowPlugin } from '@revolist/revogrid-pro';

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

This plugin is ideal for applications that require complex data presentation with nested details, providing
a robust solution for managing detailed data views efficiently within a grid structure.

#### MasterRowPlugin vs RowExpandPlugin

Use `MasterRowPlugin` when detail content needs a master-detail overlay that stays aligned with the viewport
and can span across the grid, including pinned areas. It auto-installs `OverlayPlugin` for that overlay rendering.

Use `RowExpandPlugin` when you only need inline row details in the normal row flow. `RowExpandPlugin`
duplicates the row's physical index in the row item list and renders the expanded content as a regular
virtual row, which is lighter and better suited for nested grids, row forms, and compact detail panels.

For inline row expansion, see the [Row Expand guide](/guides/data-manage/row-expand/) and
[Row Expand API](/api/row-expand/).

#### Dependencies

- **Auto-installed** `OverlayPlugin`: Auto-installs or reuses OverlayPlugin to render master-detail overlay content.
- **Auto-installed** `RowMasterAccessibilityPlugin`: Auto-installs or reuses RowMasterAccessibilityPlugin to isolate nested grid keyboard and focus behavior.
- **Event integration** `RowHeaderPlugin`: Integrates with RowHeaderPlugin row focus events when present.

```ts
class MasterRowPlugin {
  isMasterRowExpanded(
    itemVIndexes: number[],
    rowType: DimensionRows,
    virtualRowIndex: number,
  );

  isExpandedRow(
    itemVIndexes: number[],
    rowType: DimensionRows,
    virtualRowIndex: number,
  );

  /**
     * This method checks if a row is expanded by verifying two conditions:
     * 1. The row's ID (nodeId) is present in the expandedMasters collection.
     * 2. The physical row index (physRowIndex) is the same as the neighoring physical row index (sibPhysRowIndex).
     */
  getExpandedId(
    rowType: DimensionRows,
    physRowIndex: number,
    sibPhysRowIndex: number,
  );

  clearDimensions(type: DimensionRows, rowVIndexes: number[]);

  collapseRow(type: DimensionRows, rowVIndexes: number[]);

  expandRow(type: DimensionRows, virtRowIndex: number);

  destroy();
}
```

---

### `RowMasterConfig`

```ts
export type RowMasterConfig = {
  prop?: ColumnProp;
  rowHeight?: number;
  template?: (h: any, data: BeforeRowRenderEvent, additionalData?: any) => ReturnType<typeof RenderFunc>;
  /**
   * Event names from master-detail content that are allowed to bubble to the parent grid.
   * By default all RevoGrid events emitted inside the detail area are stopped.
   */
  allowDetailEvents?: readonly string[];
};
```

---

### `RowMasterBatchTarget`

```ts
export type RowMasterBatchTarget = {
  /**
   * Row collection where the target row lives.
   */
  rowType: DimensionRows;
  /**
   * Current virtual row index. It is normalized before the batch mutates row data.
   */
  rowIndex: number;
  /**
   * Desired master-row state for this row.
   */
  expanded: boolean;
};
```

---

### `RowMasterBatchEvent`

```ts
export type RowMasterBatchEvent = {
  rows: RowMasterBatchTarget[];
};
```

---

### `RowMasterEvent`

```ts
export type RowMasterEvent = CellTemplateProp | RowMasterBatchEvent;
```

---

### `RowMasterCollapseReason`

```ts
export type RowMasterCollapseReason = 'source' | 'filter' | 'drag';
```

---

### `RowMasterCollapseRow`

```ts
export type RowMasterCollapseRow = {
  nodeId: string;
  rowType: DimensionRows;
  physIndex: number;
  rowIndex: number;
};
```

---

### `RowMasterBeforeCollapseEvent`

```ts
export type RowMasterBeforeCollapseEvent = {
  reason: RowMasterCollapseReason;
  rows: RowMasterCollapseRow[];
};
```

---

### `ROW_MASTER_DETAIL_NODE_ATTR`

```ts
ROW_MASTER_DETAIL_NODE_ATTR: string;
```

---

### `RowMasterAccessibilityPlugin`

```ts
class RowMasterAccessibilityPlugin {
  handleDetailEvent(event: Event);
}
```

---

### `isRowMasterBatchEvent`

```ts
export function isRowMasterBatchEvent(detail: RowMasterEvent): detail is RowMasterBatchEvent;
```

---

### `getRowMasterNodeId`

```ts
export function getRowMasterNodeId(type: DimensionRows, physIndex: number);
```

---

### `normalizeRowMasterTargets`

```ts
export function normalizeRowMasterTargets(
  targets: RowMasterBatchTarget[],
  getItems: (rowType: DimensionRows) => number[],
): NormalizedRowMasterTarget[];
```

---

### `groupRowMasterTargets`

```ts
export function groupRowMasterTargets(
  targets: NormalizedRowMasterTarget[],
): Map<DimensionRows, Map<number, boolean>>;
```

---

### `getExpandedPhysIndexes`

```ts
export function getExpandedPhysIndexes(expandedMasters: Set<string>, type: DimensionRows);
```

---

### `removeDetailDuplicates`

```ts
export function removeDetailDuplicates(items: number[], physIndexes: Set<number>);
```

---

### `reconcileRowMasterBatch`

```ts
export function reconcileRowMasterBatch(;
```

---

### `applyRowMasterBatch`

```ts
export function applyRowMasterBatch(;
```

---

### `NormalizedRowMasterTarget`

```ts
export type NormalizedRowMasterTarget = {
  rowType: DimensionRows;
  physIndex: number;
  expanded: boolean;
};
```

---

### `RowMasterBatchReconcileInput`

```ts
export type RowMasterBatchReconcileInput = {
  type: DimensionRows;
  targetStates: Map<number, boolean>;
  items: number[];
  proxyItems: number[];
  expandedMasters: Set<string>;
  sizes?: ViewSettingSizeProp;
  rowHeight?: number;
};
```

---

### `RowMasterBatchReconcileResult`

```ts
export type RowMasterBatchReconcileResult = {
  items: number[];
  proxyItems: number[];
  expandedMasters: Set<string>;
  clearNodeIds: string[];
  sizes?: ViewSettingSizeProp;
};
```

---

### `ApplyRowMasterBatchInput`

```ts
export type ApplyRowMasterBatchInput = {
  detail: RowMasterBatchEvent;
  providers: PluginProviders;
  expandedMasters: Set<string>;
  rowHeight?: number;
};
```

---

### `ApplyRowMasterBatchResult`

```ts
export type ApplyRowMasterBatchResult = {
  expandedMasters: Set<string>;
  clearNodeIds: string[];
  applied: boolean;
};
```

---

### `isKeyboardEventFromNestedGrid`

```ts
export function isKeyboardEventFromNestedGrid(
  event: KeyboardEvent,
  parentGrid: HTMLRevoGridElement,
): boolean;
```

---

### `isEventFromNestedGrid`

```ts
export function isEventFromNestedGrid(
  event: Event,
  parentGrid: HTMLRevoGridElement,
): boolean;
```
