[DataGrid] Add "Custom columns" page to the docs

[joserodolfofreitas]

Summary

It's a recurrent pain point that users try to find some of our column implementations used in the demos and can't find them behind the data grid generator, also we have no "targetted" page where users can quickly find some good examples of custom columns and how to implement it. "Rendering cells" is under column definition.

We need to improve the discoverability and better showcase good examples of custom columns like the star-rate component, date picker and now also the sparklines.

Proposal

A new page under the Columns menu with:

• a showcase of star-rate component reviewing important APIs used (like renderCell, valueFormatter and etc.)
• a showcase of sparklines integration with any needed additional concepts
• a showcase of date pickers integration with any needed additional concepts
• a Data Grid demo that doesn't use the data generator and showcases exclusively custom columns (star rate, progress bar, link, currency, sparklines and etc).

[flaviendelangle]

a showcase of date pickers integration with any needed additional concepts

Would you keep the "editing with date picker" recipe as well or would it be removed ?

[joserodolfofreitas]

Would you keep the "editing with date picker" recipe as well or would it be removed ?

I don't see a reason to remove it. There's always the argument of maintainability, but I think it's a small case that doesn't hurt.

[cherniavskii]

a showcase of star-rate component reviewing important APIs used (like renderCell, valueFormatter and etc.)

I think we already have a demo for this one in https://mui.com/x/react-data-grid/editing/#create-your-own-edit-component
We can reuse it in the Columns docs group as well.

a showcase of date pickers integration with any needed additional concepts

For this one we can reuse https://mui.com/x/react-data-grid/recipes-editing/#usage-with-mui-x-date-pickers

a Data Grid demo that doesn't use the data generator and showcases exclusively custom columns (star rate, progress bar, link, currency, sparklines and etc).

Filled quantity seems to be a particularly interesting example:

[github-actions]

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.