Skip to content

Grid configurator

GridConfiguratorPlugin configures an ordinary RevoGrid. It is exported from @revolist/pivot to share the existing configurator UI. It does not install PivotPlugin, execute a Pivot report, or replace the grid’s source records. Pro remains independent of the Pivot package.

import { GridConfiguratorPlugin } from '@revolist/pivot';
import '@revolist/revogrid-pro/styles.css';
import '@revolist/pivot/styles.css';
const grid = document.createElement('revo-grid');
grid.columns = [
{ prop: 'country', name: 'Country', filter: 'string' },
{ prop: 'sales', name: 'Sales', filter: 'number' },
];
grid.source = [
{ country: 'Portugal', sales: 10 },
{ country: 'Portugal', sales: 20 },
];
grid.filter = true;
grid.grouping = { props: [], expandedAll: true };
grid.gridConfigurator = {
fields: [{ prop: 'sales', dataType: 'number' }],
values: [{ prop: 'sales', aggregator: 'sum' }],
};
grid.plugins = [GridConfiguratorPlugin];
document.querySelector('#grid-host')!.append(grid);

The default mount inserts a panel immediately before the grid. The application owns the surrounding layout; for a sidebar, place the grid in a flex or grid container. The plugin installs or reuses ColumnHidePlugin and AdvanceFilterPlugin.

The Fields tree controls source-column visibility and order. Existing nested header groups can be expanded, searched, hidden, and reordered using the same parent and pin-section restrictions as the column dialog. It does not create or edit header groups. There is no Pivot column-axis destination.

Row Groups, Values, and Filters are independent roles. Adding a field to one role does not hide its source column or remove another role. Checkboxes only control visibility. Hidden fields retain their configuration.

Wait until the connected grid has initialized, then pass a connected host in the same document:

import { defineGridConfigurator } from '@revolist/pivot';
grid.gridConfigurator = { mountTo: false };
await grid.componentOnReady();
const panel = await defineGridConfigurator(
document.querySelector<HTMLElement>('#sidebar')!,
grid,
{ fields: [{ prop: 'sales', dataType: 'number' }] },
);
// Unmount this surface. The adapter and grid configuration remain installed.
panel.destroy();

defineGridConfigurator reuses the installed GridConfiguratorPlugin, or installs one with no attached panel. Mounting again moves its single surface; older cleanup handles cannot remove a newer mount. The external host itself is never removed.

To release subscriptions and restore the owned group-cell rendering hook, remove the plugin through the grid’s plugin lifecycle. Destroying the adapter preserves visibility, grouping, filters, and any rendering callback installed afterward.

Each source column has at most one selected aggregation. Explicit numeric metadata defaults to sum; other or unknown fields default to count. Supply fields[].aggregators to restrict a field’s available functions, fields[].defaultAggregator to override its default, or configure shared aggregators and defaultAggregator options. Functions receive the field values of matching leaf records, using the existing Pro aggregator semantics.

Values appear beneath their source columns in synthetic group rows. With no row groups, the selections remain configured but no summary or grand total appears. Filtered-out records do not contribute. Collapsed descendants still contribute, and scrolling does not change the results. Calculations are cached outside cell rendering and refreshed after relevant data, edit, filter, or grouping changes.

Filters open the normal column filter editor. Panel and header filters share the same canonical state. Removing a filter clears that column’s conditions while preserving unrelated predicates and quick filtering. Columns explicitly marked filter: false cannot be added as filters.

This integration summarizes locally loaded records. It does not coordinate server-side grouping, remote aggregates, or complete-dataset totals for partial data.

GridConfiguratorConfig exposes fields, values, filters, aggregators, defaultAggregator, areas, mountTo, theme, and width. areas defaults to ['rows', 'values', 'filters']; hiding a destination does not clear its settings. theme can override the panel’s automatic grid-theme synchronization.

Existing grid columns, hidden-column state, grouping, and filters are authoritative. Listen to gridconfiguratorchange for snapshots containing columns, rows, values, filters, and activeFilters.

Use the installed plugin’s getState() to inspect accepted settings and updateConfig(config) to replace configurator options. Other public methods include mount, setVisible, reorderColumn, addField, removeField, reorderField, setAggregator, and openFilter. Keep runtime aggregator functions separate when persisting application settings.

Display settings, undo/redo, saved views, and runtime switching between ordinary Grid and Pivot execution are outside this integration.