# Pivot Config
URL: https://pro.rv-grid.com/api/pivot-config/
Source: src/content/docs/api/pivot-config.md
### `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.

```ts
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
```ts
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.

```ts
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.

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

---

### `PivotConfigurationActions`

```ts
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`

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

---

### `PivotFieldPanel`

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

---

### `DimensionsPanel`

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

---

### `DropZone`

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

---

### `ValueSelector`

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

---

### `DraggingItem`

The item being dragged

```ts
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`

```ts
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.

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

---

### `ColumnResizeDetail`

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

---

### `filterPivotDimensions`

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

---

### `PivotFieldSearchOptions`

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

---

### `hasPivotDiagnostics`

```ts
export function hasPivotDiagnostics(diagnostics?: PivotUiDiagnostics);
```

---

### `PivotUiDiagnostics`

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

---

### `PivotDiagnostics`

```ts
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;
```
