Customization
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
trelements in thePivotGrid. - Column—Renders the
colelements in thePivotGrid. - Cell—Renders the
tdelements (only present in thedatasection of thePivotGrid). - HeaderCell—Renders the
thelements (only present in therowandcolumnheader sections of the PivotGrid).
Additionally, the user can replace more-specific elements in the PivotGrid:
- For the
column-headersof thePivotGrid: - For the
row-headersof the PivotGrid: - For the
datasection of the PivotGrid:
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:
// ES2015 module syntax
import { PivotGridRow, PivotGridColumn, PivotGridCell, PivotGridHeaderCell } from '@progress/kendo-react-pivotgrid';// 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.forwardReffor functional components, and pass therefto the default component to assure correct behavior of the internal components.
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:
<PivotGrid cell={CustomCell} />The following example demonstrates the PivotGrid cell customization in action:
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.
