[docs] Add file explorer example to rich tree view customization docs

[noraleonte]

• I have followed (at least) the PR section of the contributing guide.

Part of #12436

[mui-bot]

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

Updated pages:

• docs/data/tree-view/rich-tree-view/customization/customization.md
• docs/data/tree-view/simple-tree-view/customization/customization.md

Generated by 🚫 dangerJS against aebb2b1

[flaviendelangle]

I know that you migrated the component almost as-is from the SimpleTreeView so the issue does not come from this PR per say.
But I'm not convinced that this example is similar to something people would actually implement.
It looks nice, but if you were building a real file explorer, you would not have the icon defined like this as React component in your dataset.

In which type of application do you think we would see this kind of example?

[noraleonte]

you would not have the icon defined like this as React

@flaviendelangle You are probably right 🤔 Maybe defining the fileType in the data set would make more sense, and we could adjust the example to be more similar to an IDE's file explorer 🤔 WDYT?

[flaviendelangle]

Yes that's what I had in mind.
We could add an optional fileType on the item, and then the icon would be something like:

let icon;
if (isExpandable) icon = folderIcon
else if (item.fileType) icon = getIconFromFileType(item.fileType)
else icon = defaultFileIcon

[flaviendelangle]

Looks great ! 🥳

[flaviendelangle]

You can pass the additional props as a param of getLabelProps to be consistent