Customizing the Group Header, Group Footer, Header, Footer, Filter, and Data Cells

Premium

The following properties allow you to customize the group header and footer as well as the header, footer, filter, and data cells:

• groupHeader
• groupFooter
• headerCell
• footerCell
• filterCell
• data

In the following example, custom cells are rendered for various GridColumn elements to provide customized styling and behavior. The header cell uses HeaderCustomCell, the filter cell is represented by MyFilterCustomCell, and footer Cell is handled by TotalFooterCustomCell. Additionally, grouped columns utilize MyHeaderCustomCell for group header and MyFooterCustomCell for group footer. The data cells are customized with MyDataCustomCell.

Change Theme

Theme

Loading ...

KendoReact Data Grid Custom Cells APIs

• Grid Cells Prop
• GridColumn Cells Prop
• API Reference of the GridCellsSettings

Suggested Links

• React Data Grid High-Level Overview
• Custom Cells Overview