Components
    • Animation
    • Buttons
    • Charts
    • Common Utilities
    • Conversational UI
    • Data Query
    • Data Tools
    • Date Inputs
    • Date Math
    • Dialogs
    • Drawing
    • Dropdowns
    • Editor
    • Excel Export
    • File Saver
    • Form
    • Gantt
    • Gauges
    • Grid
    • Indicators
    • Inputs
    • Labels
    • Layout
    • ListBox
    • ListView
    • Notification
    • PDF Processing
    • PivotGrid
    • Popup
    • Progress Bars
    • Ripple
    • Scheduler
    • Sortable
    • Tooltip
    • TreeList
    • TreeView
    • Upload
    Sample Applications
    Styling & Themes
    Common Features
    Project Setup
    Changelog

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:

  • RowRenders the tr elements in the PivotGrid.
  • ColumnRenders the col elements in the PivotGrid.
  • CellRenders the td elements (only present in the data section of the PivotGrid).
  • HeaderCellRenders 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:

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.forwardRef for functional components, and pass the ref to 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:

Example
View Source
Edit In Stackblitz  
Change Theme:

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.

Example
View Source
Edit In Stackblitz  
Change Theme: