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.

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

---

PivotConfigurationActions

interface PivotConfigurationActions {
  // Optional callbacks to inform the parent of changes:
    onUpdateColumns?: (cols: ColumnProp[]) => void;
  onUpdateRows?: (rows: ColumnProp[]) => void;
  onUpdateValues?: (values: PivotConfigValue[]) => void
}

---

PivotConfigurator

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

---

DimensionsPanel

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

---

DropZone

DropZone: ({ title, panel, items, dimensions, placeholder, i18n, renderItem, onRemove, onDrop, onDragOver, onDragEnter, onItemDragStart, }: 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: {
  rows: string;
  columns: string;
  values: string;
  dragHereRows: string;
  dragHereColumns: string;
  dragHereValues: string;
  remove: string;
};