# Customizing the Hierarchy Cells

The cells [`hierarchy`](https://www.telerik.com/kendo-react-ui-develop/components/grid/api/gridcellssettings#hierarchy) property provides the option to customize group header, group footer, and data cells of the detail component.

<CtaPanelOverview></CtaPanelOverview>

In the following example, custom cells are rendered for both standard groupings and hierarchical data within the Grid. The group header and group footer use `MyHeaderCustomCell` and `MyFooterCustomCell`, respectively, for grouped columns. Additionally, hierarchical data utilizes `HierarchyMyHeaderCustomCell` for group header, `HierarchyMyDataCustomCell` for data, and `HierarchyMyFooterCustomCell` for group footer.

[Demo Source](https://demos.telerik.com/kendo-react-ui/grid/grid-custom-cell/hierarchy/func/source.txt)

## KendoReact Grid Custom Cells APIs

* [Grid Cells Prop](https://www.telerik.com/kendo-react-ui-develop/components/grid/api/gridprops#cells)
* [GridColumn Cells Prop](https://www.telerik.com/kendo-react-ui-develop/components/grid/api/gridcolumnprops#cells)
* [API Reference of the GridCellsSettings](https://www.telerik.com/kendo-react-ui-develop/components/grid/api/gridcellssettings)

## Suggested Links

* [Custom Cells Overview](https://www.telerik.com/kendo-react-ui-develop/components/grid/cells)