# Customizing the Group Cells

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

<CtaPanelOverview></CtaPanelOverview>

In the following example, the group header is handled by `GroupMyHeaderCustomCell`, the data cells within the group use `GroupMyDataCustomCell`, and the group footer is represented by `GroupMyFooterCustomCell`.

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

## Locked Groups and Columns

When having locked groups (using the [`lockGroups`](https://www.telerik.com/kendo-react-ui-develop/components/grid/api/gridprops#lockGroups) prop) or locked columns (using the [`locked`](https://www.telerik.com/kendo-react-ui-develop/components/grid/api/gridcolumnprops#locked) prop), additional styles will be added to the td element that lock it into position. However, if you are setting additional styles to the td element, these styles will be overridden. Therefore, these should be passed to the rendered td element.

In addition, when having locked groups and columns, it is also required to render an additional td element `td2` which is required in this scenario like demonstrated in the example below.

[Demo Source](https://demos.telerik.com/kendo-react-ui/grid/grid-custom-cell/grouping/locked-groups/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)