Implement a Locked Custom Column in KendoReact Grid

Updated on Apr 27, 2026

Environment

Product Version	14.2.1
Product	Progress® KendoReact Grid

Description

You want to implement a locked (frozen) column with a fully custom cell in the KendoReact Grid, but the old cell prop on GridColumn and the tdProps property on GridCellProps are no longer available.

This knowledge base article also answers the following questions:

• How to create a custom cell for a locked column in KendoReact Grid?
• What replaced the cell prop on GridColumn?
• How to access tdProps in a custom Grid cell?

Solution

The cell prop was replaced by the cells prop, which accepts an object with a data key pointing to your custom cell component. For custom cells in locked columns, use GridCustomCellProps instead of GridCellProps — it includes the tdProps property that carries the inline styles and attributes the Grid needs to correctly position locked (sticky) columns.

Always spread tdProps onto your <td> when using locked columns. Omitting it breaks the sticky positioning.

1. Import GridCustomCellProps from @progress/kendo-react-grid.
2. Create your custom cell component accepting Readonly<GridCustomCellProps>.
3. Spread tdProps onto the <td> element and merge any additional styles on top.
4. Pass the component to the cells={{ data: MyCell }} prop on GridColumn.
5. Set locked={true} on the column as normal.

Change Theme

Theme

Loading ...

See Also

• KendoReact Grid Custom Cells Documentation
• GridCustomCellProps API
• GridColumn locked prop