github mui/mui-x v5.0.0-beta.5
on GitHub

latest releases: v7.5.0, v6.19.12, v7.4.0...
pre-release2 years ago

Oct 22, 2021

A big thanks to the 5 contributors who made this release possible. Here are some highlights ✨:

  • 💅 Remove dependency on @mui/styles and use the same styling solution from MUI Core (#2784) @DanailH
  • ✨ Add support for generics in GridRowParams, GridCellParams and GridRenderCellParams (#2436) @ZeeshanTamboli
  • 👁 Rework the virtualization engine (#2673) @m4theushw
  • 💡 Enhance internal code structure
  • 🐞 Bugfixes

@mui/x-data-grid@v5.0.0-beta.5 / @mui/x-data-grid-pro@v5.0.0-beta.5

Breaking changes

  • The DataGrid and DataGridPro no longer depends on @mui/styles. Use styled to provide custom styling. (#2784) @DanailH 

    -import { createTheme } from '@mui/material/styles';
-import { makeStyles } from '@mui/styles';
+import { styled } from '@mui/material/styles';

    The following CSS classes were renamed:

    • .MuiDataGrid-gridMenuList was renamed to .MuiDataGrid-menuList
    • .MuiGridToolbarContainer-root was renamed to .MuiDataGrid-toolbarContainer
    • .MuiGridMenu-root was renamed to .MuiDataGrid-menu
    • .MuiDataGridColumnsPanel-root was renamed to .MuiDataGrid-columnsPanel
    • .MuiGridPanel-root was renamed to .MuiDataGrid-panel
    • .MuiGridPanelContent-root was renamed to .MuiDataGrid-panelContent
    • .MuiGridPanelFooter-root was renamed to .MuiDataGrid-panelFooter
    • .MuiDataGridPanelHeader-root was renamed to .MuiDataGrid-panelHeader
    • .MuiGridPanelWrapper-root was renamed to .MuiDataGrid-panelWrapper
    • .MuiGridFilterForm-root was renamed to .MuiDataGrid-filterForm
    • .MuiGridToolbarFilterButton-root was renamed to .MuiDataGrid-toolbarFilterList

  • [DataGrid] The CSS classes .MuiDataGrid-window and .MuiDataGrid-windowContainer were removed (#2673) @m4theushw

    The following CSS classes were renamed:

    • .MuiDataGrid-viewport was renamed to .MuiDataGrid-virtualScroller
    • .MuiDataGrid-dataContainer was renamed to .MuiDataGrid-virtualScrollerContent
    • .MuiDataGrid-renderingZone was renamed to .MuiDataGrid-virtualScrollerRenderZone

  • [DataGrid] Remove the useGridSlotComponentProps hook and replace it as below: (#2856) @flaviendelangle 

    -const { apiRef, state, rootElement } = useGridSlotComponentProps();
+const apiRef = useGridApiContext();
+const [state] = useGridState(apiRef);
+const rootElement = apiRef.current.rootElementRef;

  • [DataGrid] Remove the state prop and use the initialState prop (#2848) @flaviendelangle

    Note that initialState only allows the preferencePanel, filter.filterModel and sort.sortModel keys.
    To fully control the state, use the the feature's model prop and change callback (e.g. filterModel and onFilterModelChange). 

    <DataGrid
-  state={{
+  initialState={{
    preferencePanel: {
      open: true,
      openedPanelValue: GridPreferencePanelsValue.filters,
    },
  }}
/>

  • [DataGridPro] Remove the onViewportRowsChange prop and the viewportRowsChange event (#2673) @m4theushw

    A listener on the rowsScroll event, as shown below, can be used to replace the prop: 

    const apiRef = useGridApiRef();
const prevRenderContext = React.useRef(null);

React.useEffect(() => {
  return apiRef.current.subscribeEvent("rowsScroll", ({ renderContext }) => {
    if (
      !prevRenderContext.current ||
      renderContext.firstRowIdx !== prevRenderContext.current.firstRowIndex ||
      renderContext.lastRowIdx !== prevRenderContext.current.lastRowIndex
    ) {
      prevRenderContext.current = renderContext;
      const params = {
        firstRowIndex: renderContext.firstRowIndex,
        lastRowIndex: renderContext.lastRowIndex
      };
    }
  });
}, [apiRef]);

<DataGridPro apiRef={apiRef} />

Changes

Docs

Core

Check out latest releases or
releases around mui/mui-x v5.0.0-beta.5

Don't miss a new mui-x release

NewReleases is sending notifications on new releases.

Get notifications