New to KendoReact? Start a free 30-day trial

Customization
Premium

Updated over 6 months ago

The KendoReact PivotGrid component renders multiple internal components like rows, columns, and cells. Each of this component can be customized through render props.

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

Row—Renders the tr elements in the PivotGrid.
Column—Renders the col elements in the PivotGrid.
Cell—Renders the td elements (only present in the data section of the PivotGrid).
HeaderCell—Renders the th elements (only present in the row and column header sections of the PivotGrid).

Additionally, the user can replace more-specific elements in the PivotGrid:

For the column-headers of the PivotGrid:
For the row-headers of the PivotGrid:
For the data section of the PivotGrid:
- dataRow.
- dataColumn.

Importing the Default Components

The default row, column, cell, and headerCell components are contained in the @progress/kendo-react-pivotgrid package and are set as defaultProps of the PivotGrid component:

jsx

// ES2015 module syntax
import { PivotGridRow, PivotGridColumn, PivotGridCell, PivotGridHeaderCell } from '@progress/kendo-react-pivotgrid';

jsx

// CommonJS format
const { PivotGridRow, PivotGridColumn, PivotGridCell, PivotGridHeaderCell } = require('@progress/kendo-react-pivotgrid');

Providing a Custom Component

To customize a PivotGrid 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.

jsx

const CustomCell = React.forwardRef((props, ref) => {
    return <PivotGridCell ref={ref} {...props} style={{color: props.total ? 'red' : undefined}} />
})

To apply the customization, provide the corresponding row, column, cell, or headerCell property to the PivotGrid:

jsx

<PivotGrid cell={CustomCell} />

The following example demonstrates the PivotGrid cell customization in action:

Change Theme

Theme

Loading ...

Row and Column Dimensions

A common scenario in the PivotGrid is the customization of the row and column dimensions.

The following example demonstrates applying custom width and height to specific rows and columns of the PivotGrid.