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
, andonUpdateValues
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.
ts
definePivotConfigurator: (el: HTMLElement, config?: Partial<PivotConfig>, actions?: Partial<PivotConfigurationActions>) => void;
PivotConfigurationActions
ts
interface PivotConfigurationActions {
// Optional callbacks to inform the parent of changes:
onUpdateColumns?: (cols: ColumnProp[]) => void;
onUpdateRows?: (rows: ColumnProp[]) => void;
onUpdateValues?: (values: PivotConfigValue[]) => void
}
PivotConfigurator
ts
PivotConfigurator: ({ dimensions, columns, rows, values, i18n, showColumns, showRows, showValues, onUpdateColumns, onUpdateRows, onUpdateValues, }?: Partial<PivotConfigurationComponentProps>) => preact.JSX.Element;
DimensionsPanel
ts
DimensionsPanel: ({ dimensions, draggingItem, onDragStart, isSelected, onCheckboxChange, }: DimensionsPanelProps) => preact.JSX.Element;
DropZone
ts
DropZone: ({ title, panel, items, dimensions, placeholder, i18n, renderItem, onRemove, onDrop, onDragOver, onDragEnter, onItemDragStart, }: 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: {
rows: string;
columns: string;
values: string;
dragHereRows: string;
dragHereColumns: string;
dragHereValues: string;
remove: string;
};