Creating a Wrapper Component for GridColumn in KendoReact
Environment
| Product Version | 12.2.0 |
| Product | Progress® KendoReact Grid |
Description
I want to create a wrapper function for the KendoReact GridColumn to centralize column logic across my application. However, the Grid does not render columns when wrapped in a custom React component. I need to migrate from the old cell prop structure to the new cells prop structure while maintaining backward compatibility with existing code.
This knowledge base article also answers the following questions:
- How to centralize logic for KendoReact GridColumn?
- How to map the old
cellprop to the newcellsprop structure? - Why does the KendoReact Grid not render wrapped GridColumn components?
- How to create reusable column functions with custom cell renderers?
Solution
The KendoReact Grid requires its direct children to be of type GridColumn. Wrapping GridColumn inside a custom React component prevents the Grid from recognizing it, which leads to rendering issues. To centralize the logic while maintaining compatibility, use a function instead of a React component.
Follow these steps:
- Create a wrapper function that returns a
GridColumnelement. - Inside the function, destructure the old
cellprop and map it to the newcellsobject structure withcells={{ data: cell }}. - Pass through all other props using the spread operator.
- Use this function directly within the Grid by calling it with the required props.
The example below demonstrates a wrapper function that maps custom cell renderers (for centered text, right-aligned numbers, and status indicators) from the old cell prop to the current cells prop structure.