Cells

The KendoReact Data Grid provides options for customizing its cell content by allowing you to define different types of cells.

The Grid Package is part of KendoReact, a professionally built commercial UI library. To try out this Grid you need to sign up for a 30-day trial, which gives you access to the full KendoReact library.


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.

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.

Example
View Source
Edit In Stackblitz  
Change Theme:

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.

Example
View Source
Edit In Stackblitz  
Change Theme:

In this article

Not finding the help you need?