[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 🌈

• https://www.reddit.com/r/webdev/comments/1ng8rb9/we_spent_33_months_building_a_data_grid_heres_how/

Motivation 🔦

To support Joy UI, we will have to solve a problem close to this one #6810. So if developers need a unstyled version of the data grid, we might as well solve the two problems at once.

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." [data grid] Create plugin system  #7358 (comment)

Other requests / potential users

• https://mui.zendesk.com/agent/tickets/22713

• https://app.attio.com/mui/company/8433700b-2007-4629-ad22-8d72f63ffea5/overview

[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.