Explore the Pivot Interface

After creating your first Pivot, give users controls to change the question without changing application code.

Choose an interface

Control	Use it for	Guide
Field panel	Seeing the current Rows, Columns, Values and Filters areas near the table	Field panel
Configurator	Browsing available fields and changing the full report layout	Configurator
Value-cell context menu	Inspecting contributing records and accessing supported cell actions	Underlying records
Application controls	A small set of actions tailored to your workflow	Custom integrations

Enable the built-in controls

grid.pivot = {
  rows: ['region'], columns: ['quarter'],
  values: [{ prop: 'sales', aggregator: 'sum' }],
  hasConfigurator: true,
  fieldPanel: { visible: true },
};

Open the live configurator example and move a field between the areas. The table recalculates to match. Use the field panel example to try the same workflow with the compact controls.

Follow a reporting task

Start by selecting fields, then choose an aggregation. Add filters to narrow the records and expand groups to explore details. Pivot Charts uses the same report to visualize the result.

The application decides which controls are available. Hiding a field or action is a presentation setting; enforce access rules on the backend.

Keyboard and non-drag controls

Do not make dragging the only way to edit a report. The field controls and configurator actions provide explicit field operations. Keep a visible focus indicator and label application buttons with the action they perform, such as “Add Region to Rows”. Follow grid accessibility and keyboard guidance for table interaction; chart navigation has its own keyboard guide.

Themes

Set the grid’s supported theme, such as compact or darkCompact, to match your application. Value formatting controls the numbers, while the grid theme controls the surrounding table. Test your custom cells and externally mounted controls in both appearances.