Skip to content
RevoGrid [Pro]

Summary Header

Module Extensions

ColumnRegular (Extended from @revolist/revogrid)

interface ColumnRegular {
  /**
       * Add summaryVNode property to ColumnRegular interface
       */
      summaryVNode?(h: HyperFunc<VNode>, summary: Record<string, number>): VNode
}

Plugin API

SummaryChartHeaderPlugin

The SummaryChartHeaderPlugin is a RevoGrid plugin that enhances the grid’s column headers by allowing custom summary visualizations to be displayed. This plugin leverages a custom property summaryVNode added to the ColumnRegular interface, enabling developers to inject summary charts or visual indicators based on column data summaries.

Key Features:

  • Custom Header Augmentation: Modifies the default column header template to include a summary chart or visualization as defined by the summaryVNode property in the column configuration.
  • Event-Driven Rendering: Listens to the BEFORE_HEADER_RENDER_EVENT to dynamically wrap and modify header templates, ensuring seamless integration with existing grid structures.
  • Summary Calculation: Provides a mechanism to calculate summary data for each column, allowing for flexible and dynamic summary representations based on the grid’s row data.
  • Styling Support: Automatically adds a CSS class for plugin-specific styling, enabling custom styles to be applied to headers enhanced by this plugin.

Usage:

  • Integrate this plugin into a RevoGrid instance’s plugins array to enable summary chart headers.
  • Define summaryVNode in column configurations to specify the chart or visualization logic.

Example

import { SummaryChartHeaderPlugin } from '@revolist/revogrid-pro'


const grid = document.createElement('revo-grid');
grid.plugins = [SummaryChartHeaderPlugin];
grid.columns = [
  {
    prop: 'sales',
    name: 'Sales',
    summaryVNode: (h, summary) => h('div', {}, `Total: ${summary['Total'] || 0}`),
  },
];

By using the SummaryChartHeaderPlugin, developers can enhance their RevoGrid instances with visually informative headers, improving data insights and user experience within the grid.

class SummaryChartHeaderPlugin {}