[DataGrid] Add demo to the "Custom columns" page that does not use generator

[arminmeh]

Closes #9270

Only last point from the proposal was actually missing (example without generator)

I have added a demo that collects most customized cell renderers that we have in our docs. @mui/x-data-grid-generator is still used to ~~get the actuall renderers and to~~ generate random data

Preview: https://deploy-preview-13695--material-ui-x.netlify.app/x/react-data-grid/custom-columns/#full-example

Update Renderers are outside of the main folder of the component's docs to skip the regression tests This produces the same problem with the long names as discussed in https://github.com/mui/material-ui/pull/42913#issuecomment-2225904134

So, I will add a feature to "Allow using custom labels (default to filename) for imported files, instead of entire relative path" from https://github.com/mui/material-ui/issues/41754

• [ ] Set custom file labels for the cell renderer files

[mui-bot]

Deploy preview: https://deploy-preview-13695--material-ui-x.netlify.app/

Updated pages:

• docs/data/data-grid/custom-columns/custom-columns.md
• docs/data/data-grid/faq/faq.md

Generated by :no_entry_sign: dangerJS against adf7ec94dab3ad5afe92259b51987386d30f73ec

[arminmeh]

There is an issue with the toolbar that I will have to fix in https://github.com/mui/material-ui first With too many files, file names are squashed together

Once I have the other PR I will link it here

Docs infra PR https://github.com/mui/material-ui/pull/42913

[arminmeh]

Before the PR is merged, https://github.com/mui/material-ui/issues/42733 should be resolved

[cherniavskii]

We need to link to this demo in https://mui.com/x/react-data-grid/faq/#what-is-the-purpose-of-usedemodata-hook-used-in-the-documentation-examples (adding a callout), so that users that are looking for useDemoData implementation can use the custom columns demo and copy the column definitions and/or cell renderers from there. UPD: done in 4866de8 (#13695)

This will close https://github.com/mui/mui-x/issues/13110, as duplicating useDemoData for every demo is not feasible.

[cherniavskii]

Renderers are outside of the main folder of the component's docs to skip the regression tests

I've moved them to the same folder where the demo is and ignored them in the regression tests. The file names are short enough, and they match the import paths:

[cherniavskii]

@arminmeh please review my changes and let me know what you think

[arminmeh]

Thanks for taking over @cherniavskii

the changes are fine, but I still see issues with the CodeSandbox/StackBlitz demos on the preview page charts dependency is missing (not sure if it is because the import is not in the main file, but in a custom renderer)

I see that in https://github.com/mui/material-ui/issues/41754 that the issue for CodeSandbox/StackBlitz is closed, but the checkbox is not checked @bharatkashyap do you know if some additional changes are in progress

[bharatkashyap]

I see that in mui/material-ui#41754 that the issue for CodeSandbox/StackBlitz is closed, but the checkbox is not checked @bharatkashyap do you know if some additional changes are in progress

Ah no, that checkbox is supposed to be checked since the issue was supposed to be resolved with that PR. While the original issue was fixed, I can look into what's causing the issue in this particular demo

[cherniavskii]

@bharatkashyap @arminmeh I've opened https://github.com/mui/material-ui/pull/43713 with a fix

[cherniavskii]

@arminmeh The demo now works in Stackblitz and Codesandbox, thanks for spotting it!

[arminmeh]

@cherniavskii thanks for the sandbox fixes and for the updates that made it finally merged 🥳