Cells
The KendoReact Data Grid provides options for customizing its cell content by allowing you to define different types of cells.
Types
Grid Cells
The GridCell component represents a React component or a functional component that accepts GridCellProps and returns a <td /> element. The Grid initializes its grid cells from the data for each of its rows and columns. You can replace a grid cell with a custom cell by using the cell property of the Grid column.
Filter Cells
The FilterCell component represents a React component or a functional component that accepts FilterCellProps. The Grid renders a single filter cell for each column inside the filter row. By default, the filter cell takes its value from the value of the filter property. You can replace a filter cell with a custom cell by using the filterCell property of the Grid column.
Header Cells
The HeaderCell component represents a React component or a functional component that accepts HeaderCellProps. The Grid renders a single header cell for the header of each column. By default, the header cell displays the data field or the title property together with the sorting indicators. You can replace a header cell with a custom cell by using the headerCell property of the Grid column.
Footer Cells
You can set a footer cell by using the footerCell property of the Grid column. The footerCell property accepts a React component or a functional component that receives FooterCellProps. The Grid renders a single footer cell under each column that has its footerCell property set. That cell will appear at the bottom of the column and will be always visible regardless of the vertical scrolling of the Grid.
Tooltip
The Grid enables you to render tooltips for its cells. For more information, refer to the article on implementing the KendoReact Tooltip in the Grid.
Customization
The following example demonstrates how to set a custom cell in the Grid and pass additional props to it.
