Module Extensions
HTMLRevoGridElementEventMap
(Extended from global
)
ts
interface HTMLRevoGridElementEventMap {
/**
* Event triggered when the pivot config is updated
*
* @example
* ```typescript
* grid.addEventListener(PIVOT_CFG_UPDATE_EVENT, (e) => {
* console.log(e);
* });
* ```
*/
[PIVOT_CFG_UPDATE_EVENT]: PivotConfig
}
AdditionalData
(Extended from @revolist/revogrid
)
ts
interface AdditionalData {
/**
* Additional data property for pivot
*
* @example
* ```typescript
* const grid = document.createElement('revo-grid');
* grid.additionalData = {
* pivot: {
* dimensions: [
* { prop: 'name', aggregator: 'sum' },
* ],
* rows: ['name'],
* columns: ['age'],
* values: [{ prop: 'salary', aggregator: 'sum' }],
* },
* };
* ```
*/
pivot?: PivotConfig
}
Plugin API
PivotPlugin
The PivotPlugin is a RevoGrid plugin that enables dynamic creation and manipulation of pivot table structures within the grid. It provides users with the ability to configure and apply pivot transformations on grid data for enhanced reporting and analysis.
Key Features:
- Configurable Pivot Table – Allows users to define row, column, and value fields dynamically.
- Interactive Configurator – Integrates a pivot configurator panel to modify pivot settings in real-time.
- Drag-and-Drop Support – Enables users to rearrange fields via the configurator for a flexible pivot experience.
- Efficient Data Transformation – Utilizes optimized data processing to group and aggregate large datasets.
- Custom Aggregations – Supports multiple aggregation functions, including
sum
,count
,avg
,min
, andmax
. - Dynamic Theme Adaptation – Adjusts automatically to the applied RevoGrid theme.
- State Persistence – Updates
additionalData.pivot
dynamically, ensuring persistent pivot configurations.
Usage:
- Instantiate the PivotPlugin in a RevoGrid instance and define a pivot configuration.
- Use
applyPivot
to generate a pivoted grid based on selected row, column, and value fields. - Modify the pivot structure using the interactive configurator.
- Call
clearPivot
to restore the original grid state.
Example
typescript
import { PivotPlugin } from '@revolist/revogrid-pro';
const grid = document.createElement('revo-grid');
grid.plugins = [PivotPlugin];
grid.additionalData = {
pivot: {
dimensions: [{ prop: 'Age' }, { prop: 'City' }, { prop: 'Gender' }, { prop: 'Total Spend' }],
rows: ['City', 'Age'],
columns: ['Gender'],
values: [
{ prop: 'Total Spend', aggregator: 'sum' },
],
hasConfigurator: true,
},
};
This plugin is essential for users who require advanced pivot table functionalities within RevoGrid, offering comprehensive tools for data transformation and visualization.
ts
class PivotPlugin {
updateConfigurator(config?: PivotConfig);
/**
* Apply a pivot configuration to the grid.
*/
applyPivot(config?: Partial<PivotConfig>);
/**
* Clear the pivot view and restore the original data.
*/
clearPivot();
}
PivotConfigValue
ts
interface PivotConfigValue {
// column?: Partial<ColumnRegular>;
prop: ColumnProp;
aggregator: string
}
PanelType
The type of the panel
ts
/** The type of the panel */
export type PanelType = 'dimensions' | 'rows' | 'columns' | 'values';
PivotConfigDimension
(Extended from index.ts
)
ts
interface PivotConfigDimension {
prop: ColumnProp;
/**
* Custom aggregators or use common aggregators
*/
aggregators?: { [name: string]: ((values: any[]) => any) };
/**
* Aggregator value for the column
* set automatically
*/
readonly aggregator?: string;
/**
* The type of the dimension: rows, values
* set automatically
*/
readonly dimension?: PanelType
}
PivotConfig
ts
interface PivotConfig {
dimensions?: PivotConfigDimension[];
// Row fields for the pivot
rows: ColumnProp[];
// Column fields for the pivot
columns?: ColumnProp[];
// Value fields with aggregators
values: PivotConfigValue[];
// Whether to show the configurator
hasConfigurator?: boolean;
// Where to mount the configurator
// defaults to custom element in the grid
mountTo?: HTMLElement;
flatHeaders?: boolean;
// Hide columns in the configurator
showColumns?: boolean;
// Hide rows in the configurator
showRows?: boolean;
// Hide values in the configurator
showValues?: boolean;
// i18n
i18n?: typeof PIVOT_CONFIG_EN
}
createPivotData
Create pivot data based on the configuration.
ts
export function createPivotData(
originalData: DataType[],;
pivotColumns
ts
export function pivotColumns(;