[data grid] Base UI support, component API (unstyled)

[oliviertassinari]

Summary 💡

Provide an unstyled version of the data grid, with a component API, effectively, bringing Base UI to the data grid.

This is not to be confused with the Hook API which is about owning the whole rendering: #1016.

Examples 🌈

To support Joy UI, we will have to solve a problem close to this one https://github.com/mui/mui-x/pull/6810. So if developers need a unstyled version of the data grid, we might as well solve the two problems at once.

Motivation 🔦

Today, the data grid exposes most of its slot for customization. However, developers that replaces all the slots still get Material UI and MUI System bundled, this isn't great.

• "Would really help our bundle size, we have tried to replace everything Mui/material through slots as it is, so the bloat feels extra painful." https://github.com/mui/mui-x/issues/7358#issuecomment-1694476165

[lauri865]

I think it's the most obvious and easiest way for you to increase the market size and appeal for the data-grid package.

And I think there's some easy wins to be had. I played around with it a bit, and if we could move the defaultSlots / DATA_GRID_PREMIUM_DEFAULT_SLOTS_COMPONENTS import one level above, from e.g. from useDataGridPremiumProps to DatagridPremium component level instead, then the amount of code needed to build a custom datagrid becomes quite trivial to create and maintain.

[lauri865]

Wasn't quite as easy, still getting @mui/material inherited from various angles.

E.g. calling createColumns (see below link) somehow inherits a bunch of @mui/material: https://github.com/mui/mui-x/blob/ced19b256c4c3322fe00954c17869634a1eca11a/packages/grid/x-data-grid/src/hooks/features/columns/gridColumnsUtils.ts#L288C19-L288C19

Either I'm not following how it can inherit @mui from there, or maybe treeshaking breaks for some reason in rollup (if so, could it be the way params are destructed with a default for columnVisibilityModel:

export const createColumnsState = ({
  apiRef,
  columnsToUpsert,
  initialState,
  columnTypes,
  columnVisibilityModel = gridColumnVisibilityModelSelector(apiRef),
  keepOnlyColumnsToUpsert = false,
}

[michael-land]

I have the same issue. For a new project, I want to use JoyUI, but there's very limited support for Joy in MuiX components.