Configurator Customization

The KendoReact PivotGridConfigurator component is responsible for providing an end-user interface for configuring the PivotGrid component.

The user can replace the following PivotGridConfigurator components with custom ones:

• Editor—The editor contains all components responsible for editing the current configuration.
• Form—The form provides the necessary functionality to access and edit individual parts of the configuration, as well as intermediate state.
• FormElement—The formElement provides a default container for all internal editor fields.

Additionally, the user can replace more-specific elements which are deeply nested in the PivotGridConfigurator tree:

• For the editor:
  • fields, column axes, row axes and measure axes labels.
  • fieldsEditor— The FieldsEditor further allows customization of:
    • treeView
    • noData
  • row, column and measure axes editors. The AxesEditor further allows customization of:
    • chipList
• The AxisEditor allows further customization of:
  • chip
  • dropClue
  • columMenuTextColumn
  • filterFieldsEditor— The AxisFilterFieldsEditor further allows customization of:
    • resetButton
    • applyButton
    • treeView
    • noData

Importing the Default Components

All of the default components are contained in the @progress/kendo-react-pivotgrid package and are set as defaultProps of their parent.

Copy Code// ES2015 module syntax
import { PivotGridConfiguratorEditor, PivotGridFieldsEditor, PivotGridAxesEditor, PivotGridAxisEditor, PivotGridAxisFilterFieldsEditor } from '@progress/kendo-react-pivotgrid';

Copy Code// CommonJS format
const { PivotGridConfiguratorEditor, PivotGridFieldsEditor, PivotGridAxesEditor, PivotGridAxisEditor, PivotGridAxisFilterFieldsEditor } = require('@progress/kendo-react-pivotgrid');

Providing a Custom Component

To customize a PivotGridConfigurator component, first create a new React Component which compose the default one.

The recommended approach is to always wrap the component in an React.forwardRef for functional components, and pass the ref to the default component to assure correct behavior of the internal components.

Copy Codeconst CustomLabel = React.forwardRef((props, ref) => {
    return (
      <Label
        ref={ref}
        {...props}
        style={{ color: '#3f51b5' }} 
      >
        {props.children}{":"}
      </Label>
    )
})

const CustomEditor = React.forwardRef((props, ref) => {
    return (
        <PivotGridEditor 
            ref={ref}
            {...props}
            fieldsLabel={CustomLabel}
            columnAxesLabel={CustomLabel}
            rowAxesLabel={CustomLabel}
            measureAxesLabel={CustomLabel}
        />
    )
})

To apply the customization, provide the corresponding editor property to the PivotGridConfigurator:

Copy Code<PivotGridConfigurator editor={CustomEditor} />

The following example demonstrates the PivotGridConfigurator editor customization in-action:

Suggested Links

• PivotGrid Customization Overview
• API Reference of the KendoReact PivotGridConfigurator
• API Reference of the KendoReact PivotGridConfiguratorEditor