I want to create a custom Kendo Grid component in React so that if there's any future update (e.g., changes like cell to cells), we can make the change in just one place instead of updating it everywhere in the project.
Currently, I have tried creating a custom wrapper for the Grid and Column components, but it's causing rendering issues.
Can you guide me on the correct way to create a reusable custom Grid and Column component using Kendo React Grid that works reliably with all features (sorting, filtering, paging, custom cells, etc.)?
Ideally, we want a centralized Grid component where we can pass in props like columns, data, and events, and handle all common logic in one place.
Hi, Akhilesh,
There should be no problem to wrap the Grid inside a wrapping component and reuse it in you application. The most important things you should pay attention to because the Grid is a fully functional component, are that using hooks like `setSelect`, `setSort`, etc. change a state variable, and thus triggers a refresh of the component, and a new render cycle.
In order to properly use custom components, they need to be defined outside of the current component that manages the grid and its lifecycle, or have them be defined within React.useCallback.
I hope the provided information will be helpful for you but let me know should I can assist you any further on this matter.