[docs] Improve main demo to show new functionalities

[joserodolfofreitas]

Summary

A new data grid demo uses the data grid master detail to showcase a list of the most popular features.

Motivation

• It works as an interactive tour through all the important features.
• Using the data grid to discover its features brings an opportunity to experience the grid first-hand. Devs/buyers experiment the component as end-users.
• The old demo is too outdated
• There won't be a single real use case demo where we can showcase all the features at the same time.
• We can always increment new features isolated.

What's coming next?

• Build real use case demos.

  • A demo to display a massively long log (focused on performance (virtualization) + infinite loading)
  • A demo feeding the grid with a real API (focused on data analysis).
  • A demo showcase styling and visual customizations.
  • A demo focused on editing use case (excel / airtable like app)

• Consider a special page for the /x/react-data-grid/demo/ to accommodate the demos.

• Consider to replace the list /x/react-data-grid/#features with the demo on this PR.

Preview

https://deploy-preview-5292--material-ui-x.netlify.app/x/react-data-grid/demo/

[mui-bot]

These are the results for the performance tests:

Test case	Unit	Min	Max	Median	Mean	σ
Filter 100k rows	ms	455.8	680.3	568	560.88	85.569
Sort 100k rows	ms	542.2	883.6	746.7	731.76	113.266
Select 100k rows	ms	197.5	283.3	214.4	228.66	32.281
Deselect 100k rows	ms	132.4	202.5	182.2	174.16	26.041

Generated by 🚫 dangerJS against 708c77d

[oliviertassinari]

Looking at the page makes me think of a quick win that we could marge as a different PR: the ad adds vertical space, which push the demo further below the top of the fold. Since this page is about optimizing for adoption, showing the ad also sounds counter productive. So +1 to disable it.

[oliviertassinari]

As a general note, for this demo, I think that could be great is to have it "as bloated as" possible, meaning something that we could use during a sales call to show all the features and how they all integrate well together. In the rest of the docs, the demos tend to be very focused but a big part of the value is in solving the complexity of all the features working together.

Now, we won't be able to demo everything, so I think that we could default to a focus on data analytics, how developers can group, pivot, and extract information from a large data set, keeping them inside the app, longer, without having to use Tableau+ or Excel.

Now, having said this, maybe one demo won't be enough, so maybe we would need to demo real-world classes of use cases (instead of being feature centered):

• Data analytics, the one I have just proposed as the default above
• Finance trading
• Logs, e.g. AWS CloudWatch

[joserodolfofreitas]

Now, having said this, maybe one demo won't be enough, so maybe we would need to demo real world class of use cases (instead of begging feature centered):

I agree. The initial work I did with the demo was focused on data analytics with real APIs.
I'll keep working on it in parallel, for another PR.

[flaviendelangle]

Now, having said this, maybe one demo won't be enough, so maybe we would need to demo real world class of use cases (instead of begging feature centered):

Yes
Enabling all the features makes a very poor user experience in my opinion
Real use cases forces us to enable features that make sense together and highlight how they inter-play

[cherniavskii]

I like this demo, +1 for pushing it forward!

[cherniavskii]

Just few minor suggestions to the code.
Well done, demo looks great!

[m4theushw]

I'm leaning in the direction of #5292 (comment). The purpose of the main demo was to be equivalent to https://ag-grid.com/example/. Now we only have https://deploy-preview-5292--material-ui-x.netlify.app/x/react-data-grid/#commercial-version to experiment with the Pro version with a big dataset, but without an option to enable pagination.

What do you think of replacing https://deploy-preview-5292--material-ui-x.netlify.app/x/react-data-grid/#features with the demo you created, then keep the main demo as it is and we improve it later?

[joserodolfofreitas]

What do you think of replacing https://deploy-preview-5292--material-ui-x.netlify.app/x/react-data-grid/#features with the demo you created, then keep the main demo as it is and we improve it later?

@m4theushw, I think that's a good idea!
I feel though that the current main demo is really not that relevant anymore.
So I'd propose to do it on a future step.

In the medium/long term, my proposal for the demo effort is:

1. Merge this one to replace the current main demo.
2. Work on real-case-scenario demos (at least one, but ideally more).
3. Build a special demo "landing" page to display the new demos
   • Because we'll likely have multiple real-case-scenario demos, we might need to think about how we want to display them.
   • Maybe it lives outside the markdown limitations.
   • Likely use the full-width page.
4. At this point, instead of showing this features' demo with the other real-case demos, I think we can move the features demo to https://deploy-preview-5292--material-ui-x.netlify.app/x/react-data-grid/#features as suggested.

[flaviendelangle]

I am also in favor of removing FullFeaturedDemo and create one more fine-tuned for row virtualization
Can be done in a follow up

[oliviertassinari]

one of the reasonings for the current order is that I wanted to have the Master detail at first to signalize its usage on the demo. And on a minor degree, I also saw an opportunity to craft a list order based on different criteria like popularity, feature combos, and a good mix of features from different plans on top.

@joserodolfofreitas "at first to signalize its usage on the demo" it took me a while to figure this out, having master detail first didn't help me figure this out. I would recommend that a row click expands the detail. I think that the expand icon is too easy to miss.

Regarding why I proposed "A default sorting per plan" with the community first: I think it's because most developers won't jump straight to use the Pro & Premium features. I think that it's more effective to have them first adopt the MIT features. Once they need the Pro & Premium feature, their first attempt will be to try our grid, rather than a competitor with whom they have to rebuild all the product knowledge.