Module Extensions
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');
* },
* },
* }
*/
masterRow?: RowMasterConfig
}
Plugin API
EXPAND_COLUMN
ts
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
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.
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>;
};