[docs] Reshuffle columns and rows styling sections

[DanailH]

Fixes #1496

Sections already existed so this was more of combining them in a single page.

Things I'm not sure about:

• The right side nav structure - for columns we have 2 separate sections but for rows there is only one,
• Do we still need the demo? I've moved it to the bottom of the page. Technically it is a duplicate because the same can be found on the Demo page
• Should update the examples?

https://deploy-preview-1622--material-ui-x.netlify.app/components/data-grid/style/

[dtassone]

I would swap the rows and cell section to keep some kind of hierachy.

[oliviertassinari]

Do we still need the demo? I've moved it to the bottom of the page. Technically it is a duplicate because the same can be found on the Demo page

I think so because the purpose is different. In the one from the /demo page, developers are not supposed to look at the source. It will grow as a mess (overwhelming to learn anything in the code side) as we make it full-featured.

[dtassone]

I would rename demo to Theme
https://deploy-preview-1622--material-ui-x.netlify.app/components/data-grid/style/#demo

[oliviertassinari]

I would rename demo to Theme
https://deploy-preview-1622--material-ui-x.netlify.app/components/data-grid/style/#demo

I agree that the current header name feels off. To some extent, it makes sense to call it "Theme" as we have talked about using the theme to implement this customization demo. On the other hand, developers might expect something they can directly import if we can it "Theme", which we don't provide, it's only a customization demo.

Maybe we could call it like the customization demos in the core components? For instance https://next.material-ui.com/components/checkboxes/#customized-checkbox

[DanailH]

I agree, the demo feels off as we already have a demo on another page. I would change it to "Customized demo" (single) and if we add more we can have sections and rename it to "Customized demos"