KendoReact Data Grid Custom Cells Overview
The KendoReact Data Grid provides the option to override its internal components by allowing you to customize its different types of cells.
Starting with KendoReact 5.14.0, you can apply more customizations to the Grid with a new set of properties. The previously available props such as the GridColumn
cellprop or the GridcellRendercallback are still available but provide less options for customization as the ones listed in this article.
Getting Started with the KendoReact Data Grid Custom Cells
The Grid has a cells property that provides the option to add a template to every single cell in the Grid infrastructure separately. In addition, the cells prop is also available for the GridColumn component, and is useful if you want to configure the cells of an individual column.
Add Basic Custom Data Cell
All the bellow customizations can be done on the GridColumn level using its cells property.
In the following example, a custom data cell is rendered for the GridColumn with the Discontinued field.
Customizing the Group Header, Group Footer, Header, Footer, Filter, and Data Cells
The following properties allow you to customize the group header and footer as well as the header, footer, filter, and data cells:
Customizing the Edit Cells
The cells edit property provides the option to customize the numeric, boolean, text, and date edit cells.
Customizing the Hierarchy Cells
The cells hierarchy property provides the option to customize group header, group footer, and data cells of the detail component.
Customizing the Group Cells
The cells group property provides the option to customize the group header, group footer, and data cells of each group.
Locked Groups and Columns
When having locked groups (using the lockGroups prop) or locked columns (using the 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.
Customizing the Selection Cells
The cells select property provides the option to customize the group header, group footer, and data cells of each selected cell.