Skip to content

Releases: mui/mui-x

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/x-data-grid@v5.0.0-beta.6 / @mui/x-data-grid-pro@v5.0.0-beta.6

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/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

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/x-data-grid@v5.0.0-beta.4 / @mui/x-data-grid-pro@v5.0.0-beta.4

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/x-data-grid@v5.0.0-beta.3 / @mui/x-data-grid-pro@v5.0.0-beta.3

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/x-data-grid@v4.0.1 / @mui/x-data-grid-pro@v4.0.1

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/x-data-grid@v5.0.0-beta.2 / @mui/x-data-grid-pro@v5.0.0-beta.2

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

v5.0.0-beta.1

17 Sep 15:32
68ae5d5
Compare
Choose a tag to compare
v5.0.0-beta.1 Pre-release
Pre-release

Sep 17, 2021

A big thanks to the 3 contributors who made this release possible.

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

Docs

Core

v5.0.0-beta.0

17 Sep 09:54
83f66e1
Compare
Choose a tag to compare
v5.0.0-beta.0 Pre-release
Pre-release

Sep 17, 2021

🎉 This is the first release with support for the new MUI v5 🎉!
In the next releases, we will be working to bring all the cool features from MUI v5 to the advanced components.

This beta version of MUI X drops support for MUI v4. We encourage everyone to upgrade to MUI v5 to be able to continue to get all the upcoming features and fixes of MUI X. New versions of MUI X v4, containing only fixes, will still be released, but at a slower pace.

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

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

Breaking changes

  • [DataGridPro] Remove apiRef.current.getState method.

    -const state = apiRef.current.getState();
    +const state = apiRef.current.state
  • [DataGridPro] The third argument in apiRef.current.selectRow is now inverted to keep consistency with other selection APIs. (#2523) @flaviendelangle

    -selectRow: (id: GridRowId, isSelected?: boolean, allowMultiple?: boolean = false) => void;
    +selectRow: (id: GridRowId, isSelected?: boolean, resetSelection?: boolean = false) => void;
  • [DataGrid] Remove the options prop from the return of useGridSlotComponentProps.

    -const { options } = useGridSlotComponentProps();
    +const rootProps = useGridRootProps();
  • [DataGrid] The module augmentation is not enabled by default. This change was done to prevent conflicts with projects using DataGrid and DataGridPro together.

    In order to still be able to do overrides at the theme level, add the following imports to your project:

    +import type {} from '@mui/x-data-grid/themeAugmentation';
    +import type {} from '@mui/x-data-grid-pro/themeAugmentation';

Changes

Docs

Core

v4.0.0

28 Sep 20:16
da74b7a
Compare
Choose a tag to compare

Aug 27, 2021

🎉 This is the first stable release of the data grid component 🎉!

We have been iterating on the component for 18 months. With the introduction of the row edit feature, many bug fixes, and polishing of the documentation, we believe the component is ready for a stable release.

The MUI X v4.0.0 release supports Material UI v4 and has partial support for v5-beta. With the soon-to-be-released v5 version of the core components, we are moving ongoing work to the v5 release line (Core and X).
The support for existing projects on MUI v4 won't be a priority going forward. We encourage you to migrate to MUI Core v5-beta and soon MUI X v5-beta. We don't patch, fix, or alter older versions. Using MUI Core v4 with MUI X v5 might lead to extra bundle size and configuration.

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

  • 🚀 Introduce the row editing feature (#2098) @m4theushw

  • ⚡️ Rename the XGrid component to DataGridPro (#2382) @m4theushw

    This should help clarify the products vs. plans separation. MUI X is a product line on its own. It contains MIT and Commercial software. Removing X from the name of the paid components should help remove a possible confusion: the MIT version of X is meant to be valuable enough for developers to use it, without feeling that it's crippled compared to other OSS alternatives.
    The Pro suffix should help make it clear what's MIT and what's not.

  • ✨ Rename the @material-ui npm scope to @mui (#2341) @oliviertassinari

    This is part of the ongoing rebranding of the project and company. Material-UI is our current official name, however, we are going to change it. It's too long to write, read, and pronounce; and it is too closely associated with Material Design. In the near future, the whole project/company is moving to MUI and https://mui.com/.

  • 💡 The api property was removed from the callback params. To access the API, use the DataGridPro (#2312) @DanailH

@mui/x-data-grid@v4.0.0 / @mui/x-data-grid-pro@v4.0.0

Breaking changes

  • [DataGrid] Move packages to @mui scope and rename XGrid to DataGridPro (#2341, #2382) @m4theushw @oliviertassinari
    You can find in the above highlight section why we are making these name changes. You can migrate following these steps:

    -import { DataGrid } from '@material-ui/data-grid';
    +import { DataGrid } from '@mui/x-data-grid';
    -import { XGrid } from '@material-ui/x-grid';
    -<XGrid />
    +import { DataGridPro } from '@mui/x-data-grid-pro';
    +<DataGridPro />
  • [DataGrid] The api property was removed from the callback params (#2312) @DanailH
    To access the API, use the DataGridPro and get it from the new details param.

     <DataGridPro
    -  onColumnResize={(params, event) => console.log(params.api)}
    +  onColumnResize={(params, event, details) => console.log(details.api)}
     />
  • [DataGrid] Remove unused row CSS classes (#2327) @ZeeshanTamboli
    The CSS classes .Mui-odd and .Mui-even were removed from the row.

Changes

Docs

Core

v4.0.0-alpha.37

12 Aug 16:16
b81daef
Compare
Choose a tag to compare

Jul 12, 2021

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

This is the last alpha release. We are moving to beta in the next release, next week.

@material-ui/data-grid@v4.0.0-alpha.37 / @material-ui/x-grid@v4.0.0-alpha.37

Breaking changes

  • [DataGrid] Drop support for @material-ui/core below v4.12.0 (#2281) @DanailH

  • [XGrid] Replace event constants with the GridEvents enum (#2279) @flaviendelangle

    -import { GRID_CELL_EDIT_START } from '@material-ui/x-grid';
    -apiRef.current.subscribeEvent(GRID_CELL_EDIT_START, (params, event) => { ... });
    +import { GridEvents } from '@material-ui/x-grid';
    +apiRef.current.subscribeEvent(GridEvents.cellEditStart, (params, event) => { ... });

Changes

Docs

Core