Row Master

Module Extensions

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');
      *     },
      *   },
      * }
      */
      masterRow?: RowMasterConfig
}

Plugin API

EXPAND_COLUMN

EXPAND_COLUMN: {
  size: number;
  readonly: true;
  cellProperties: () => { class: string; };
  cellTemplate: (h: HyperFunc<VNode>, data: CellTemplateProp) => 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.

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>;
};