Skip to content

Releases: mui/mui-x

5.0.1

23 Nov 14:11
d3cfcef
Compare
Choose a tag to compare

Nov 23, 2021

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

  • 🎁 New API to validate the editing values (#3006) @m4theushw

    You can now use the preProcessEditCellProps key in GridColDef to synchronously or asynchronously validate the values committed.

    const columns: GridColDef[] = [
      {
        field: 'firstName',
        preProcessEditCellProps: (params: GridEditCellPropsChangeParams) => {
          const hasError = params.props.value.length < 3;
          return { ...params.props, error: hasError };
        },
      },
      {
        field: 'email',
        preProcessEditCellProps: async (params: GridEditCellPropsChangeParams) => {
          const userWithEmail = await fetchUserByEmail(params.value);
          const hasError = !!userWithEmail;
          return { ...params.props, error: hasError };
        }
      }
    ];
  • ✨ New method getRootDimensions to access the size of the grid (#3007) @flaviendelangle

    It contains the size of the viewport (which is the scrollable container containing the rows and columns) considering scrollbars or not.

    const dimensions = apiRef.current.getRootDimensions();

@mui/[email protected] / @mui/[email protected]

Changes

Core

Docs

v5.0.0

23 Nov 14:11
2409df3
Compare
Choose a tag to compare

Nov 23, 2021

🎉 We are excited to introduce MUI X v5.0.0 🎉!

If you want to migrate the DataGrid or DataGridPro from v4 to v5, take a look at the migration guide.
This version is fully compatible with @mui/[email protected] and can be used with @material-ui/[email protected] with some additional steps.

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

  • ⌨️ Enhance keyboard navigation when pagination is enabled
  • 👁 Better support for flex columns
  • 📚 Documentation improvements
  • 🐞 Bugfixes

@mui/[email protected] / @mui/[email protected]

Breaking changes

  • [DataGrid] The following CSS classes were renamed to follow the internal convention:

    • MuiDataGrid-columnsContainer was renamed to MuiDataGrid-columnHeaders
    • MuiDataGrid-columnHeaderWrapper was renamed to MuiDataGrid-columnHeadersInner
    • The scroll class applied to MuiDataGrid-columnHeaderWrapper was renamed to MuiDataGrid-columnHeadersInner--scrollable
  • [DataGrid] The props.components.Checkbox and props.componentsProps.checkbox props were renamed to props.components.BaseCheckbox and props.componentsProps.baseCheckbox respectively.

    As a first step for #3066, these slots were renamed to clearly indicate that they are meant to replace a core component.

     <DataGrid
       components={{
    -    checkbox: MyCustomCheckbox,
    +    BaseCheckbox: MyCustomCheckbox,
       }}
       componentsProps={{
    -    checkbox: {},
    +    baseCheckbox: {},
       }}
     />

    Note: these changes apply to both the DataGrid and DataGridPro components.

Changes

  • [DataGrid] Block multi-rows updates in apiRef.current.updateRows on the Community plan (#3095) @flaviendelangle
  • [DataGrid] Fix filter not working after deleting the value (#3018) @m4theushw
  • [DataGrid] Fix performance regression when selecting 100k rows (#3077) @m4theushw
  • [DataGrid] Fix apiRef.current.updateRows to not share rows from other instances (#3127) @m4theushw
  • [DataGrid] Fix flex space allocation to not cause a horizontal scroll when there is enough space (#3099) @flaviendelangle
  • [DataGrid] Improve the filter panel behaviors (#3080) @flaviendelangle
  • [DataGrid] Fix keyboard navigation between column headers and rows when not on the first page (#3086) @flaviendelangle
  • [DataGrid] Fix keyboard navigation between rows when not on the first page (#3074) @flaviendelangle
  • [DataGrid] Prevents bubbling in menu header (#3000) @alexfauquette
  • [DataGrid] Remove unused rendering state and selectors (#3133) @flaviendelangle
  • [DataGrid] Rename Checkbox component and props slots to BaseCheckbox (#3142) @DanailH

Core

Docs

v5.0.0-beta.7

04 Nov 16:00
Compare
Choose a tag to compare
v5.0.0-beta.7 Pre-release
Pre-release

Nov 4, 2021

  • 💅 Reduce styles specificity to make it simpler to override (#3012) @DanailH
  • 🌍 Add Hebrew (heIL) locale (#3028) @ColdAtNight
  • 📚 Documentation improvements
  • 🐞 Bugfixes

@mui/[email protected] / @mui/[email protected]

Breaking changes

  • [core] Prefix selectors from useGridContainerProps with unstable (#3002) @flaviendelangle

    The dimension API is being temporarily made private to allow to clean it in future minor releases. The current approach causes useless re-renders.
    If you relay on any of these selectors, open an issue explaining the use case so that will be taken into account when refactoring them.

    The following selectors were prefixed by unstable_. Use the provided alternatives.

    1. gridContainerSizesSelector was renamed to unstable_gridContainerSizesSelector
    2. gridViewportSizesSelector was renamed to unstable_gridViewportSizesSelector
    3. gridScrollBarSizeSelector was renamed to unstable_gridScrollBarSizeSelector

    The following selectors were removed. You can hard-code their logic in your application if you really need them.

    1. gridDataContainerSizesSelector
    const dataContainerSizes = gridContainerSizesSelector(state)?.dataContainerSizes ?? null;
    1. gridDataContainerHeightSelector
    const dataContainerHeight = gridContainerSizesSelector(state)?.dataContainerSizes.height ?? null;

    The selector gridViewportSizeStateSelector was a duplicate and has been removed, you can use the selector unstable_gridViewportSizesSelector instead.

Changes

Core

Docs

v4.0.2

01 Nov 15:05
e9a6fef
Compare
Choose a tag to compare

Nov 1, 2021

This version backports bug fixes and some of the features from the v5.x active release line.
As the development of v5 evolves, newer fixes might not be cherry-picked to the legacy version.
To have access to the latest features it is encouraged to upgrade to MUI X v5.
Upgrading MUI Core to v5 is also recommended, however, v4 can still be used by following these instructions.

Big thanks to the 3 contributors who made this release possible. Here are some highlights ✨:

@mui/[email protected] / @mui/[email protected]

Changes

Core

v5.0.0-beta.6

29 Oct 17:43
6d992f8
Compare
Choose a tag to compare
v5.0.0-beta.6 Pre-release
Pre-release

Oct 29, 2021

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

@mui/[email protected] / @mui/[email protected]

Breaking changes

  • [DataGridPro] The following methods from apiRef were renamed. Use the provided alternatives. (#2870) @flaviendelangle

    1. apiRef.current.applyFilters was renamed to apiRef.current.unsafe_applyFilters
    2. apiRef.current.applyFilterLinkOperator was renamed to apiRef.current.setFilterLinkOperator
    3. apiRef.current.upsertFilter was renamed to apiRef.current.upsertFilterItem
    4. apiRef.current.deleteFilter was renamed to apiRef.current.deleteFilterItem
  • [DataGridPro] The apiRef.current.applyFilter method was removed. (#2870) @flaviendelangle
    You should never have to call it directly since the filters are already applied when the filterModel prop changes.
    To manually apply the filters, use apiRef.current.unsafe_applyFilters.

    -apiRef.current.applyFilter
    +apiRef.current.unsafe_applyFilters
  • [DataGridPro] Rename filtering, sorting, and rows selectors to match the naming convention (#2942) @flaviendelangle

    1. unorderedGridRowIdsSelector was renamed to gridRowIdsSelector
    2. sortingGridStateSelector was renamed to gridSortingStateSelector
    3. sortedGridRowIdsSelector was renamed to gridSortedRowIdsSelector
    4. visibleSortedGridRowIdsSelector was renamed to gridVisibleSortedRowIdsSelector
    5. visibleGridRowCountSelector was renamed to gridVisibleRowCountSelector
    6. filterGridColumnLookupSelector was renamed to gridFilterActiveItemsSelector
  • [DataGridPro] The sortedGridRowsSelector was renamed to gridSortedRowEntriesSelector (#2942) @flaviendelangle

    The return value was also changed as below:

    -sortedGridRowsSelector: (state: GridState) => Map<GridRowId, GridRowModel>
    -const map = sortedGridRowsSelector(state);
    +gridSortedRowEntriesSelector: (state: GridState) => GridRowEntry[]
    +const map = new Map(gridSortedRowEntriesSelector(state).map(row => [row.id, row.model]));
  • [DataGridPro] The visibleSortedGridRowsSelector was replaced with gridVisibleSortedRowEntriesSelector (#2942) @flaviendelangle

    The return value was also changed as below:

    -visibleSortedGridRowsSelector: (state: GridState) => Map<GridRowId, GridRowModel>;
    -const map = visibleSortedGridRowsSelector(state);
    +gridVisibleSortedRowEntriesSelector: (state: GridState) => GridRowEntry[]
    +const map = new Map(gridVisibleSortedRowEntriesSelector(state).map(row => [row.id, row.model]));
  • [DataGridPro] The visibleSortedGridRowsAsArraySelector was replaced with gridVisibleSortedRowEntriesSelector (#2942) @flaviendelangle

    The return value was also changed as below:

    -visibleSortedGridRowsAsArraySelector: (state: GridState) => [GridRowId, GridRowData][];
    +gridVisibleSortedRowEntriesSelector: (state: GridState) => GridRowEntry[]
  • [DataGridPro] The filterGridItemsCounterSelector selector was removed. (#2942) @flaviendelangle
    Use gridFilterActiveItemsSelector as replacement.

    -const filterCount = filterGridItemsCounterSelector(state);
    +const filterCount = gridFilterActiveItemsSelector(state).length;
  • [DataGridPro] The unorderedGridRowModelsSelector selector was removed. (#2942) @flaviendelangle
    Use apiRef.current.getRowModels or gridRowIdsSelector and gridRowsLookupSelector.

Changes

Docs

Core

v5.0.0-beta.5

22 Oct 14:56
e7305eb
Compare
Choose a tag to compare
v5.0.0-beta.5 Pre-release
Pre-release

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/[email protected] / @mui/[email protected]

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

v5.0.0-beta.4

14 Oct 14:45
8b1b24f
Compare
Choose a tag to compare
v5.0.0-beta.4 Pre-release
Pre-release

Oct 14, 2021

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

  • 🎁 Add the ability to print the grid (#2519) @DanailH

    This new feature adds a button to the toolbar to generate a printer-friendly layout. Check the documentation about it.

  • 💡 Enhance internal code structure

  • ✨ New slots for row and cell (#2753) @m4theushw

  • 📚 Documentation improvements

  • 🐞 Bugfixes

@mui/[email protected] / @mui/[email protected]

Breaking changes

  • [DataGrid] Remove unused event listeners and redundant DOM attributes on GridCell and GridRow (#2810) @m4theushw

    The following props were removed. If you depend on them, use componentsProps.row and componentsProps.cell to pass custom props to the row or cell.

    • onCellBlur
    • onCellOver
    • onCellOut
    • onCellEnter
    • onCellLeave
    • onRowOver
    • onRowOut
    • onRowEnter
    • onRowLeave

    For more information, check this page. Example:

    -<DataGrid onRowOver={handleRowOver} />;
    +<DataGrid
    +  componentsProps={{
    +    row: { onMouseOver: handleRowOver },
    +  }}
    +/>;

    The data-rowindex and data-rowselected attributes were removed from the cell element. Equivalent attributes can be found in the row element.

    The data-editable attribute was removed from the cell element. Use the .MuiDataGrid-cell--editable CSS class.

    The data-mode attribute was removed from the cell element. Use the .MuiDataGrid-cell--editing CSS class.

  • [DataGrid] The state.filter and state.visibleRows were merged into a single state.filter sub-state (#2782) @flaviendelangle

    To still access this information, use state.filter or the selectors as below:

    -const filterModel = state.filter
    -const filterModel = gridFilterStateSelector(state)
    +const filterModel = state.filter.filterModel
    +const filterModel = gridFilterModelSelector(state) // preferred method
    
    -const visibleRowsLookup = state.visibleRows.visibleRowsLookup
    -const visibleRowsLookup = visibleGridRowsStateSelector(state).visibleRowsLookup
    +const visibleRowsLookup = state.filter.visibleRowsLookup
    +const visibleRowsLookup = gridVisibleRowsLookupSelector(state).visibleRowsLookup // preferred method
    
    -const visibleRows = state.visibleRows.visibleRows
    +const visibleRows = state.filter.visibleRows
    +const visibleRows = gridVisibleRowsLookupSelector(state).visibleRows // preferred method
  • [DataGrid] The CSS classes constants are not exported anymore. Use gridClasses instead. (#2788) @flaviendelangle

    -const columnHeaderClass = GRID_COLUMN_HEADER_CSS_CLASS
    +const columnHeaderClass = gridClasses.columnHeader
    
    -const rowClass = GRID_ROW_CSS_CLASS
    +const rowClass = gridClasses.row
    
    -const cellClass = GRID_CELL_CSS_CLASS
    +const cellClass = gridClasses.cell
    
    -const columnSeparatorClass = GRID_COLUMN_HEADER_SEPARATOR_RESIZABLE_CSS_CLASS
    +const columnSeparatorClass = gridClasses['columnSeparator--resizable']
    
    -const columnHeaderTitleClass = GRID_COLUMN_HEADER_TITLE_CSS_CLASS
    +const columnHeaderTitleClass = gridClasses.columnHeaderTitle
    
    -const columnHeaderDropZoneClass = GRID_COLUMN_HEADER_DROP_ZONE_CSS_CLASS
    +const columnHeaderDropZoneClass = gridClasses.columnHeaderDropZone
    
    -const columnHeaderDraggingClass = GRID_COLUMN_HEADER_DRAGGING_CSS_CLASS
    +const columnHeaderDraggingClass = gridClasses["columnHeader--dragging"]
  • [DataGrid] Rename gridCheckboxSelectionColDef to GRID_CHECKBOX_SELECTION_COL_DEF (#2793) @flaviendelangle

    - gridCheckboxSelectionColDef
    + GRID_CHECKBOX_SELECTION_COL_DEF
  • [DataGrid] The constants referring to the column types were removed (#2791) @flaviendelangle
    Replace them as below:

    -const isColumnString = column.type === GRID_STRING_COLUMN_TYPE;
    +const isColumnString = col.type === 'string';
    
    -const isColumnNumber = col.type === GRID_NUMBER_COLUMN_TYPE;
    +const isColumnNumber = col.type === 'number';
    
    -const isColumnDate = col.type === GRID_DATE_COLUMN_TYPE;
    +const isColumnDate = col.type === 'date';
    
    -const isColumnDateTime = col.type === GRID_DATETIME_COLUMN_TYPE;
    +const isColumnDateTime = col.type === 'dateTime';
    
    -const isColumnBoolean = col.type === GRID_BOOLEAN_COLUMN_TYPE;
    +const isColumnBoolean = col.type === 'boolean';
  • [DataGrid] The state initializers were removed (#2782) @flaviendelangle

    Use getDefaultGridFilterModel instead of getInitialGridFilterState:

    -const [filterModel, setFilterModel] = React.useState(getInitialGridFilterState);
    +const [filterModel, setFilterModel] = React.useState(getDefaultGridFilterModel);

    For the other methods, you can hardcode the value you want to apply:

    -const [sortModel, setSortModel] = React.useState(() => getInitialGridSortingState().sortModel);
    +const [sortModel, setSortModel] React.useState([]);
    
    -getInitialGridColumnReorderState
    -getInitialGridColumnResizeState
    -getInitialGridColumnsState
    -getInitialGridRenderingState
    -getInitialGridRowState
    -getInitialGridState
    -getInitialVisibleGridRowsState
    -getInitialGridState

Changes

Docs

Core

v5.0.0-beta.3

07 Oct 14:31
Compare
Choose a tag to compare
v5.0.0-beta.3 Pre-release
Pre-release

Oct 7, 2021

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

  • 🌎 Add Persian (faIR) locale (#2712) @devlifeX
  • 🎁 Allow selecting a range of rows with Shift + click (#2456) @flaviendelangle
  • 🚀 Allow to throttle the row updates with the throttleRowsMs prop on DataGridPro and remove the default 100ms row update delay (#2561) @flaviendelangle
  • 💡 Enhance internal code structure
  • 📚 Documentation improvements
  • 🐞 Bugfixes

@mui/[email protected] / @mui/[email protected]

Breaking changes

  • [DataGrid] Rename some selectors and interfaces to follow the codebase naming conventions (#2723) @flaviendelangle

    The following selectors were renamed:

    -const filterModel = filterGridStateSelector(state);
    +const filterModel = gridFilterModelSelector(state);
    -const density: GridGridDensity = densitySelector(state);
    +const density: GridDensityState = gridDensitySelector(state);
    -const rendering: InternalRenderingState = gridRenderingSelector(state);
    +const rendering: GridRenderingState = gridRenderingSelector(state);

Changes

Docs

Core

v4.0.1

29 Sep 15:06
d7a9a77
Compare
Choose a tag to compare

Sep 29, 2021

This version backports bug fixes and some of the features from the v5.x active release line.
As the development of v5 evolves, newer fixes might not be cherry-picked to the legacy version.
To have access to the latest features it is encouraged to upgrade to MUI X v5 and MUI Core v5.

Big thanks to the 3 contributors who made this release possible. Here are some highlights ✨:

  • 👁 Allow to disable virtualization with the disableVirtualization prop (#2728) @m4theushw
  • 🕹 Fix navigation between column headers with rows filtered (#2730) @m4theushw
  • 🐞 Fix numeric filter operators not handling '0' correctly (#2732) @flaviendelangle

@mui/[email protected] / @mui/[email protected]

Changes

Docs

Core

v5.0.0-beta.2

24 Sep 12:44
d5e05f1
Compare
Choose a tag to compare
v5.0.0-beta.2 Pre-release
Pre-release

Sep 24, 2021

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

@mui/[email protected] / @mui/[email protected]

Breaking changes

  • [DataGrid] The params passed to the valueFormatter were changed. (#2581) @DanailH

    Use the api to get the missing params.
    The GridValueFormatterParams interface has the following signature now:

    -export type GridValueFormatterParams = Omit<GridRenderCellParams, 'formattedValue' | 'isEditable'>;
    +export interface GridValueFormatterParams {
    +  /**
    +   * The column field of the cell that triggered the event
    +   */
    +  field: string;
    +  /**
    +   * The cell value, but if the column has valueGetter, use getValue.
    +   */
    +  value: GridCellValue;
    +  /**
    +   * GridApi that let you manipulate the grid.
    +   */
    +  api: any;
    +}

Changes

Docs

Core