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:

  • EditorThe editor contains all components responsible for editing the current configuration.
  • FormThe form provides the necessary functionality to access and edit individual parts of the configuration, as well as intermediate state.
  • FormElementThe 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:

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.

// ES2015 module syntax
import { PivotGridConfiguratorEditor, PivotGridFieldsEditor, PivotGridAxesEditor, PivotGridAxisEditor, PivotGridAxisFilterFieldsEditor } from '@progress/kendo-react-pivotgrid';
// 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.

const 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:

<PivotGridConfigurator editor={CustomEditor} />

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

Example
View Source
Change Theme: