Custom Cells
The KendoReact Data Grid provides options for customizing its cell content by allowing you to define different types of cells.
As of update
5.14.0
, new properties were introduced which allow you to apply further customizations to the Grid. The previously available props such as the GridColumncell
prop or the GridcellRender
callback are still available but provide less options for customization as the ones listed in this article.
Grid cells
The Grid has a cells
property that provides the option to add a template to every single cell in the Grid infrastructure separately. Below you can find examples on the usage of each cells
property:
Group header, Group footer, Header cell, Footer cell, Filter cell and Data cell
The following properties allow you to customize the group header and footer as well as the header, footer, filter, and data cells:
Edit
The cells edit
property provides the option to customize the numeric, boolean, text, and date edit cells.
Hierarchy
The cells hierarchy
property provides the option to customize group header, group footer, and data cells of the detail component.
Group
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.
Selection
The cells select
property provides the option to customize the group header, group footer, and data cells of each selected cell.
GridColumn cells prop
All the above 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.