mui / mui-x

MUI X: Build complex and data-rich applications using a growing list of advanced React components, like the Data Grid, Date and Time Pickers, Charts, and more!
https://mui.com/x/
4.04k stars 1.24k forks source link

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

Open joserodolfofreitas opened 1 year ago

joserodolfofreitas commented 1 year ago

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:

flaviendelangle commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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: