Pivot Config

pivotConfigUiDependencies

Dependencies

• Required aggregators: Uses Pro aggregation definitions for built-in value aggregation options.
• Required pro-ui: Uses Pro UI helper components and styles for configurator controls.

pivotConfigUiDependencies: PluginDependency[];

---

definePivotConfigurator

The PivotConfigurator component provides a flexible configuration interface for managing pivot table layouts. It allows users to drag and drop dimensions, rows, columns, and values into designated zones, facilitating dynamic pivot table setup.

Features:

• Supports drag-and-drop functionality for configuring rows, columns, and values.
• Enables dynamic selection and removal of dimensions, rows, columns, and values.
• Includes built-in aggregator selection for values based on dimensions.
• Provides customizable i18n support for localization of UI labels and messages.

Usage:

• Import PivotConfigurator and pass in the required dimensions, columns, rows, and values as props.
• Optionally, provide callbacks for onUpdateColumns, onUpdateRows, and onUpdateValues to handle configuration changes.

Example

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

definePivotConfigurator(yourElement, {
  dimensions: [...],
  rows: [...],
  columns: [...],
  values: [...],
}, {
  onUpdateColumns: (updatedColumns) => {
    // Handle column configuration changes
  },
  onUpdateRows: (updatedRows) => {
    // Handle row configuration changes
  },
  onUpdateValues: (updatedValues) => {
    // Handle value configuration changes
  },
})

The PivotConfigurator component is ideal for applications that require flexible, user-driven pivot table customization, especially in data management, reporting, and analytics tools.

Mounts the standalone Pivot configurator into any host element.

Use this when you want the drag-and-drop Pivot field panel outside of the default PivotPlugin wrapper, or when you need to drive Pivot state from an external UI shell.

definePivotConfigurator: (el: HTMLElement, config?: Partial<PivotConfig>, actions?: Partial<PivotConfigurationActions>, diagnostics?: PivotUiDiagnostics | undefined) => void;

---

definePivotFieldPanel

Mounts the compact in-grid Pivot field panel into a host element.

Unlike the standalone configurator, this panel is intended to sit above the Pivot grid and expose the active filter, data, row, and column field areas.

definePivotFieldPanel: (el: HTMLElement, config?: Partial<PivotConfig>, actions?: Partial<PivotConfigurationActions>, layout?: { columns?: (ColumnRegular<ColumnProp> | ColumnGrouping<any>)[] | undefined; colSize?: number | undefined; resizedColumns?: ColumnResizeDetail; } | undefined, diagnostics?: PivotUiDiagnostics | undefined) => void;

---

PivotConfigurationActions

interface PivotConfigurationActions {
  /** Called whenever the configurator updates the ordered column dimension list. */
    onUpdateColumns?: (cols: ColumnProp[]) => void;
  /** Called whenever the configurator updates the ordered row dimension list. */
    onUpdateRows?: (rows: ColumnProp[]) => void;
  /** Called whenever the configurator updates the selected measures or aggregators. */
    onUpdateValues?: (values: PivotConfigValue[]) => void;
  /** Called whenever the configurator updates the ordered filter field list. */
    onUpdateFilters?: (filters: ColumnProp[]) => void;
  /** Current sorting order used by the field panel. */
    sorting?: SortingOrder;
  /** Called when a field-panel sort control is toggled. */
    onToggleSort?: (prop: ColumnProp) => void;
  /** Called when the user clears the active Pivot layout. */
    onResetLayout?: () => void
}

---

PivotConfigurator

PivotConfigurator: ({ dimensions, columns, rows, values, filters, i18n, fieldPanel, showColumns, showRows, showValues, showFilters, onUpdateColumns, onUpdateRows, onUpdateValues, onUpdateFilters, onResetLayout, diagnostics, }?: Partial<PivotConfigurationComponentProps>) => preact.JSX.Element;

---

PivotFieldPanel

PivotFieldPanel: ({ dimensions, columns, rows, values, filters, fieldPanel, i18n, showColumns, showRows, showValues, showFilters, onUpdateColumns, onUpdateRows, onUpdateValues, onUpdateFilters, onResetLayout, diagnostics, }?: Partial<PivotFieldPanelProps>) => preact.JSX.Element;

---

DimensionsPanel

DimensionsPanel: ({ dimensions, draggingItem, allowFieldDragging, onDragStart, isSelected, onCheckboxChange, search, onSearch, i18n, }: DimensionsPanelProps) => preact.JSX.Element;

---

DropZone

DropZone: ({ title, panel, items, dimensions, placeholder, i18n, renderItem, onRemove, onDrop, onDragOver, onDragEnter, onItemDragStart, allowFieldDragging, }: DropZoneProps) => preact.JSX.Element;

---

ValueSelector

ValueSelector: ({ value, aggregators, onUpdateValue }: ValueSelectorProps) => preact.JSX.Element;

---

DraggingItem

The item being dragged

interface DraggingItem {
  /** The source panel of the dragging item */
    source: PanelType;
  /** The index of the dragging item in the source panel */
    index: number;
  /** Dragging item */
    prop: ColumnProp
}

---

PIVOT_CONFIG_EN

PIVOT_CONFIG_EN: {
  fields: string;
  rows: string;
  columns: string;
  values: string;
  filters: string;
  fieldPanel: string;
  rowsPanelHint: string;
  columnsPanelHint: string;
  valuesPanelHint: string;
  filtersPanelHint: string;
  dropFilterFieldsHere: string;
  dragHereRows: string;
  dragHereColumns: string;
  dragHereValues: string;
  dragHereFilters: string;
  searchFields: string;
  noFieldsFound: string;
  resetLayout: string;
  pivotWarnings: string;
  pivotError: string;
  remove: string;
};

---

getPivotFieldPanelRowsWidth

Resolves the pixel width of the Pivot “rows” section based on current grid columns and optional live resize payload.

export function getPivotFieldPanelRowsWidth(
  config: Partial<PivotConfig> | null | undefined,
  columns: (ColumnGrouping | ColumnRegular)[] = [],
  defaultSize = 100,
  resizedColumns?: ColumnResizeDetail,
);

---

ColumnResizeDetail

export type ColumnResizeDetail = Record<number, ColumnRegular> | undefined;

---

filterPivotDimensions

export function filterPivotDimensions(
  dimensions: PivotConfigDimension[],
  query = '',
  options: PivotFieldSearchOptions =;

---

PivotFieldSearchOptions

interface PivotFieldSearchOptions {
  /** Include dimensions marked hidden in the returned field list. */
    showHidden?: boolean
}

---

hasPivotDiagnostics

export function hasPivotDiagnostics(diagnostics?: PivotUiDiagnostics);

---

PivotUiDiagnostics

interface PivotUiDiagnostics {
  warnings?: string[];
  error?: string
}

---

PivotDiagnostics

PivotDiagnostics: ({ diagnostics, i18n, }: { diagnostics?: PivotUiDiagnostics | undefined; i18n?: { fields: string; rows: string; columns: string; values: string; filters: string; fieldPanel: string; rowsPanelHint: string; columnsPanelHint: string; valuesPanelHint: string; filtersPanelHint: string; dropFilterFieldsHere: string; dragHereRows: string; dragHereColumns: string; dragHereValues: string; dragHereFilters: string; searchFields: string; noFieldsFound: string; resetLayout: string; pivotWarnings: string; pivotError: string; remove: string; } | undefined; }) => preact.JSX.Element | null;