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

[arminmeh]

Closes #13110
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 mui/material-ui#42913 (comment)

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

TODO

• 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 🚫 dangerJS against adf7ec9

[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
mui/material-ui#42913

[arminmeh]

Before the PR is merged, mui/material-ui#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 #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 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

[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 mui/material-ui#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 🥳