# 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](https://www.telerik.com/kendo-react-ui/components/pivotgrid/api/pivotgridprops#row)—Renders the `tr` elements in the `PivotGrid`.
* [Column](https://www.telerik.com/kendo-react-ui/components/pivotgrid/api/pivotgridprops#column)—Renders the `col` elements in the `PivotGrid`.
* [Cell](https://www.telerik.com/kendo-react-ui/components/pivotgrid/api/pivotgridprops#cell)—Renders the `td` elements (only present in the `data` section of the `PivotGrid`).
* [HeaderCell](https://www.telerik.com/kendo-react-ui/components/pivotgrid/api/pivotgridprops#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`:
  * [columnHeadersRow](https://www.telerik.com/kendo-react-ui/components/pivotgrid/api/pivotgridprops#columnheadersrow).
  * [columnHeadersColumn](https://www.telerik.com/kendo-react-ui/components/pivotgrid/api/pivotgridprops#columnheaderscolumn).
  * [columnHeadersCell](https://www.telerik.com/kendo-react-ui/components/pivotgrid/api/pivotgridprops#columnheaderscell).
* For the `row-headers` of the PivotGrid:
  * [rowHeadersRow](https://www.telerik.com/kendo-react-ui/components/pivotgrid/api/pivotgridprops#rowheadersrow).
  * [rowHeadersColumn](https://www.telerik.com/kendo-react-ui/components/pivotgrid/api/pivotgridprops#rowheaderscolumn).
  * [rowHeadersCell](https://www.telerik.com/kendo-react-ui/components/pivotgrid/api/pivotgridprops#rowheaderscell).
* For the `data` section of the PivotGrid:
  * [dataRow](https://www.telerik.com/kendo-react-ui/components/pivotgrid/api/pivotgridprops#datarow).
  * [dataColumn](https://www.telerik.com/kendo-react-ui/components/pivotgrid/api/pivotgridprops#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](https://reactjs.org/docs/composition-vs-inheritance.html) 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) => {
    // Forward the ref and props so the internal components keep working; color only total cells.
    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:

[Demo Source](https://demos.telerik.com/kendo-react-ui/pivotgrid/customization/cell/basic/func/source.txt)

## 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`.

[Demo Source](https://demos.telerik.com/kendo-react-ui/pivotgrid/customization/dimensions/func/source.txt)

## Suggested Links

* [API Reference of the KendoReact PivotGrid](https://www.telerik.com/kendo-react-ui/components/pivotgrid/api/pivotgridprops)
* [API Reference of the KendoReact PivotGridRow](https://www.telerik.com/kendo-react-ui/components/pivotgrid/api/pivotgridrowprops)
* [API Reference of the KendoReact PivotGridColumn](https://www.telerik.com/kendo-react-ui/components/pivotgrid/api/pivotgridcolumnprops)
* [API Reference of the KendoReact PivotGridCell](https://www.telerik.com/kendo-react-ui/components/pivotgrid/api/pivotgridcellprops)
* [API Reference of the KendoReact PivotGridHeaderCell](https://www.telerik.com/kendo-react-ui/components/pivotgrid/api/pivotgridheadercellprops)