[data grid] Custom components outside of the DataGrid

[oliviertassinari]

Summary 💡

This is a continuation of #2522, about allowing the data grid to be composable, made out of smaller components that are easier to combine.

We have a demo in the docs on how to compose a portal https://mui.com/x/react-data-grid/filtering-recipes/ since #10121 using the <Portal> but it comes with its own problems:

• no SSR support
• unintuitive React tree structure & rendering order

Examples 🌈

<DataGridProvider {...data}>
  <GridToolbarContainer>
    <GridToolbarColumnsButton />
    <GridToolbarFilterButton />
    <GridToolbarDensitySelector />
    <GridToolbarExport />
  </GridToolbarContainer>
  <DataGrid />
</DataGridProvider>

Motivation 🔦

• slots are usually harder to customize than individual components
• a composable data grid is something that is harder to pull off with an agnostic data grid (React, Vue, etc.)

Search keywords: composable, composition