Field Panel

The field panel is the compact Pivot editor above the grid. Its four areas show the active Rows, Columns, Values and Filters. Users can add and move fields, edit measures, and filter records while keeping the result in view.

Open the full demo and framework source.

Enable It

Interactive example

Field panel

Add fields, edit measures, filter members, sort rows and swap axes above the grid

The example loads when visible.

Reset

import { PivotPlugin, type PivotConfig } from '@revolist/pivot';

const pivot: PivotConfig = {
  dimensions: [
    { prop: 'region', name: 'Region', dataType: 'string' },
    { prop: 'category', name: 'Category', dataType: 'string' },
    { prop: 'quarter', name: 'Quarter', dataType: 'string' },
    { prop: 'sales', name: 'Sales', dataType: 'number', allowedRoles: ['values'] },
    { prop: 'active', name: 'Active', dataType: 'boolean', filterOptions: [true, false] },
  ],
  rows: ['region'],
  columns: ['quarter'],
  values: [{ id: 'sales-sum', prop: 'sales', aggregator: 'sum' }],
  filters: ['active'],
  hasConfigurator: false,
  fieldPanel: { visible: true },
};

const grid = document.querySelector('revo-grid')!;
grid.plugins = [PivotPlugin];
grid.pivot = pivot;
grid.source = [
  { region: 'North', category: 'Audio', quarter: 'Q1', sales: 120, active: true },
  { region: 'North', category: 'Video', quarter: 'Q2', sales: 80, active: false },
  { region: 'South', category: 'Audio', quarter: 'Q1', sales: 90, active: true },
];

fieldPanel.visible defaults to false. Setting it to true lets PivotPlugin mount and manage the panel above its grid. hasConfigurator controls the full configurator independently. Keep it false when only the compact panel is needed.

Use the Panel

Area	Purpose	Try it
Rows	Group records vertically; field order defines the hierarchy.	Add Category, then drag it before or after Region.
Columns	Group records into column headers.	Move Quarter here or swap the row and column axes.
Values	Aggregate source values into each result cell.	Open the Sales cog to choose an aggregation or Edit measure.
Filters	Filter source records before aggregation.	Open the Active cog and choose Edit filter.

Use the + beside an area to search the field catalog and add an eligible field. The cog beside a placed field opens its actions: settings such as aggregation or Edit filter come first, followed by layout actions such as assigning another area or moving earlier/later, then removal when allowed. Dividers separate these groups. Available actions follow the field’s allowedRoles and visible areas.

Drag chips to reorder or move them between compatible areas. The cog’s layout actions provide a keyboard alternative. Swap Rows and Columns exchanges the axes together; the sort button beside a row field changes its sort order.

In a wide host, Rows sits beside Values and Columns, with Filters above. In a narrow host, the areas stack and chips wrap to fit the available space. Long captions truncate within a chip; hover the caption to read its full label while the action controls remain available.

In Edit filter, search for members, choose Include or Exclude, select values, and apply. Selections retain their original types: Boolean true, number 1, string '1' and null are distinct members. Active selections appear above the shelves and can be reopened or cleared. filters stores field placements; filterSelections stores the selected members.

The preview’s Panel actions case disables dragging so you can try +, cog actions, removal, Clear and Reset directly. The Filter cell template case shows custom member presentation.

Visibility and Permissions

These options belong inside fieldPanel:

Option	Default	Effect
visible	false	Mount the compact panel through PivotPlugin.
allowFieldDragging	true	Allow drag-and-drop field movement.
allowFieldActions	true	Show the + picker and cog action menus.
allowFieldRemoving	false in the compact panel	Show field Remove controls and allow Clear actions.
showResetLayout	false	Show Reset layout when the owner provides the reset action.
showRowFields, showColumnFields, showDataFields, showFilterFields	Inherit showRows, showColumns, showValues, showFilters; otherwise true	Show individual areas.

For example, allow keyboard actions and removal while disabling dragging:

fieldPanel: {
  visible: true,
  allowFieldDragging: false,
  allowFieldActions: true,
  allowFieldRemoving: true,
  showResetLayout: true,
}

Explicit area options override the show* flags in both stock constructors. Hiding an area preserves its analytical configuration. These UI permissions are independent: disabling dragging retains + and cog actions. Setting allowFieldActions: false hides those menus and restores the inline aggregation and filter selectors; sorting, axis swapping and member selection can still be available. Use application admission policy when layout edits must be rejected.

Labels and Custom Hosts

Root i18n supplies shared labels; fieldPanel.texts overrides those labels in both stock mount helpers. Overrides are partial and missing entries retain English defaults:

fieldPanel: {
  visible: true,
  texts: {
    values: 'Measures',
    editFilter: 'Choose members',
    addFieldToArea: area => `Add to ${area}`,
  },
}

Field captions come from dimensions[].name. See field metadata for types, folders and allowed placements.

For an application-owned host, use definePivotFieldPanel(host, config, actions) and dispose it with the returned cleanup function or disposePivotFieldPanel(host). The host owns applying accepted changes and rerendering the controlled configuration. The helpers do not create a separate analytical owner; follow the Configurator API for update callbacks, member loading and cleanup.

Reuse Dropdown Cell Templates

Filter fields with filterOptions can reuse the owning dimension’s dropdown presentation. Enable dropdown.syncCellTemplate and provide the same dropdown source metadata used by the cell template:

const statusBadge = (h, { model, value }) =>
  h('span', { class: `status-badge ${model.tone}` }, value);

const pivot = {
  dimensions: [{
    prop: 'status',
    filterOptions: ['Open', 'Closed'],
    cellTemplate: statusBadge,
    dropdown: {
      syncCellTemplate: true,
      source: [
        { value: 'Open', label: 'Open', tone: 'green' },
        { value: 'Closed', label: 'Closed', tone: 'gray' },
      ],
    },
  }],
  filters: ['status'],
};

With default actions, open the filter field’s cog and choose Edit filter to see the synchronized content in the member editor. The inline selector uses it when allowFieldActions: false and a quick selection is available. Explicit dropdown renderers remain authoritative. When the field panel is mounted by PivotPlugin, grid columnTypes and additionalData are forwarded to the template resolver.