# Summary Header
URL: https://pro.rv-grid.com/api/summary-header/
Source: src/content/docs/api/summary-header.md
## Module Extensions

### `ColumnRegular` (Extended from `@revolist/revogrid`)

```ts
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
```typescript
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.

```ts
class SummaryChartHeaderPlugin {}
```
