Skip to content

Releases: mui/mui-x

v5.0.0-beta.7

04 Nov 16:00
@alexfauquette alexfauquette
v5.0.0-beta.7
459c224
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/x-data-grid@v5.0.0-beta.7 / @mui/x-data-grid-pro@v5.0.0-beta.7

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

Contributors

oliviertassinari, flaviendelangle, and 4 other contributors
Assets 2
Loading

v4.0.2

01 Nov 15:05
@DanailH DanailH
v4.0.2
e9a6fef
This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
GPG key ID: 4AEE18F83AFDEB23
Expired
Learn about vigilant mode.
Compare
Choose a tag to compare
v4.0.2

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

Changes

Core

Contributors

chendoron, oliviertassinari, and m4theushw
Assets 2
Loading

v5.0.0-beta.6

29 Oct 17:43
@DanailH DanailH
v5.0.0-beta.6
6d992f8
This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
GPG key ID: 4AEE18F83AFDEB23
Expired
Learn about vigilant mode.
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

Contributors

flaviendelangle, DanailH, and 3 other contributors
Assets 2
Loading

v5.0.0-beta.5

22 Oct 14:56
@m4theushw m4theushw
v5.0.0-beta.5
e7305eb
This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
GPG key ID: 4AEE18F83AFDEB23
Expired
Learn about vigilant mode.
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

Contributors

flaviendelangle, DanailH, and 3 other contributors
Assets 2
Loading

v5.0.0-beta.4

14 Oct 14:45
@flaviendelangle flaviendelangle
v5.0.0-beta.4
8b1b24f
This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
GPG key ID: 4AEE18F83AFDEB23
Expired
Learn about vigilant mode.
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

Contributors

flaviendelangle, DanailH, and 5 other contributors
Assets 2
Loading

v5.0.0-beta.3

07 Oct 14:31
@DanailH DanailH
v5.0.0-beta.3
64d18fe
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

Contributors

jeremyalan, oliviertassinari, and 7 other contributors
Assets 2
Loading

v4.0.1

29 Sep 15:06
@m4theushw m4theushw
v4.0.1
d7a9a77
This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
GPG key ID: 4AEE18F83AFDEB23
Expired
Learn about vigilant mode.
Compare
Choose a tag to compare
v4.0.1

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

Contributors

oliviertassinari, flaviendelangle, and m4theushw
Assets 2
Loading

v5.0.0-beta.2

24 Sep 12:44
@m4theushw m4theushw
v5.0.0-beta.2
d5e05f1
This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
GPG key ID: 4AEE18F83AFDEB23
Expired
Learn about vigilant mode.
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

Contributors

oliviertassinari, DanailH, and 3 other contributors
Assets 2
Loading

v5.0.0-beta.1

17 Sep 15:32
@flaviendelangle flaviendelangle
v5.0.0-beta.1
68ae5d5
This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
GPG key ID: 4AEE18F83AFDEB23
Expired
Learn about vigilant mode.
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

Contributors

flaviendelangle, ZeeshanTamboli, and m4theushw
Assets 2
Loading

v5.0.0-beta.0

17 Sep 09:54
@flaviendelangle flaviendelangle
v5.0.0-beta.0
83f66e1
This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
GPG key ID: 4AEE18F83AFDEB23
Expired
Learn about vigilant mode.
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

Contributors

oliviertassinari, flaviendelangle, and 7 other contributors
Assets 2
Loading