Row Master

Module Extensions

HTMLRevoGridElement (Extended from global)

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

---

HTMLRevoGridElementEventMap (Extended from global)

interface HTMLRevoGridElementEventMap {
  /**
       * Toggles one master detail row from a cell payload, or applies desired states for multiple rows.
       */
      [ROW_MASTER]: RowMasterEvent
}

---

AdditionalData (Extended from @revolist/revogrid)

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

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

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 and Row Expand API.

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.

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

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

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

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

---

RowMasterEvent

export type RowMasterEvent = CellTemplateProp | RowMasterBatchEvent;

---

ROW_MASTER_DETAIL_NODE_ATTR

ROW_MASTER_DETAIL_NODE_ATTR: string;

---

RowMasterAccessibilityPlugin

class RowMasterAccessibilityPlugin {
  handleDetailEvent(event: Event);
}

---

isRowMasterBatchEvent

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

---

getRowMasterNodeId

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

---

normalizeRowMasterTargets

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

---

groupRowMasterTargets

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

---

getExpandedPhysIndexes

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

---

removeDetailDuplicates

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

---

reconcileRowMasterBatch

export function reconcileRowMasterBatch(;

---

applyRowMasterBatch

export function applyRowMasterBatch(;

---

NormalizedRowMasterTarget

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

---

RowMasterBatchReconcileInput

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

---

RowMasterBatchReconcileResult

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

---

ApplyRowMasterBatchInput

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

---

ApplyRowMasterBatchResult

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

---

isKeyboardEventFromNestedGrid

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

---

isEventFromNestedGrid

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