Module Extensions

HTMLRevoGridElementEventMap (Extended from global)

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)

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, and max.
• 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

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.

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

interface PivotConfigValue {
  // column?: Partial<ColumnRegular>;
    prop: ColumnProp;
  aggregator: string
}

---

PanelType

The type of the panel

/** The type of the panel */
export type PanelType =  'dimensions' | 'rows' | 'columns' | 'values';

---

PivotConfigDimension (Extended from index.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

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.

export function createPivotData(
  originalData: DataType[],;

---

pivotColumns

export function pivotColumns(;