Module Extensions
ColumnRegular
(Extended from @revolist/revogrid
)
ts
interface ColumnRegular {
/**
* Enables expand template on cells
*/
expand?: boolean
}
AdditionalData
(Extended from @revolist/revogrid
)
ts
interface AdditionalData {
/**
* Additional data for row expand
*
* @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 base plugin for row expansion functionality in RevoGrid. It provides core functionality for expanding/collapsing rows that can be used by other plugins like nested grid, row details, tree data etc.
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 building more complex plugins
Usage Example:
ts
import { RowExpandPlugin } from './row-expand/index';
const grid = document.createElement('revo-grid');
grid.plugins = [RowExpandPlugin];
// Configure through additionalData
grid.additionalData = {
rowExpand: {
// Rows 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, 'Expanded content')
}
};
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;
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
}