Skip to content

Releases: mui/mui-x

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

Contributors

oliviertassinari, DanailH, and 3 other contributors
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
Verified
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/[email protected] / @mui/[email protected]

Docs

Core

Contributors

flaviendelangle, ZeeshanTamboli, and m4theushw
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
Verified
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/[email protected] / @mui/[email protected]

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
Loading

v4.0.0

28 Sep 20:16
@DanailH DanailH
v4.0.0
da74b7a
This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
GPG key ID: 4AEE18F83AFDEB23
Expired
Verified
Learn about vigilant mode.
Compare
Choose a tag to compare
v4.0.0

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

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

Contributors

oliviertassinari, flaviendelangle, and 4 other contributors
Loading

v4.0.0-alpha.37

12 Aug 16:16
@m4theushw m4theushw
v4.0.0-alpha.37
b81daef
This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
GPG key ID: 4AEE18F83AFDEB23
Expired
Verified
Learn about vigilant mode.
Compare
Choose a tag to compare
v4.0.0-alpha.37

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

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

Contributors

oliviertassinari, flaviendelangle, and 5 other contributors
Loading

v4.0.0-alpha.36

06 Aug 11:18
@DanailH DanailH
v4.0.0-alpha.36
eb34684
This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
GPG key ID: 4AEE18F83AFDEB23
Expired
Verified
Learn about vigilant mode.
Compare
Choose a tag to compare
v4.0.0-alpha.36

August 6, 2021

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

@material-ui/[email protected] / @material-ui/[email protected]

Breaking changes

  • [DataGrid] Polish cell editing (#2220) @m4theushw

    • Replace onCellModeChange prop with onCellEditEnter or onCellEditExit.
    • Rename onCellEditEnter prop to onCellEditStart.
    • Rename onCellEditEnd prop to onCellEditStop.
     <DataGrid
-  onCellEditEnter={...}
-  onCellEditExit={...}
+  onCellEditStart={...}
+  onCellEditStop={...}
 />
    • [XGrid] The setEditCellProps API call is not available anymore.
      Use the controlled editing or setEditRowsModel.
    -apiRef.current.setEditCellProps({ id, field, props: { ...props, error: true } });
+apiRef.current.setEditRowsModel({
+  ...oldModel,
+  [id]: {
+    ...oldModel[id],
+    [field]: { ...oldModel[id][field], error: true },
+  },
+});

  • [DataGrid] Allow non-integer column width for flex columns (#2282) @flaviendelangle

    • The width property of the columns is no longer updated with the actual width of of the column. Use the new computedWidth property in the callbacks instead.
    const columns: GridColDef = [
  {
  field: "name",
  width: 100,
  renderCell: ({ value, colDef }) => {
  - console.log(colDef.width!)
  + console.log(colDef.computedWidth)
    return value
  }
]

Changes

  • [DataGrid] Canonical controlled state behavior (#2208) @oliviertassinari
  • [DataGrid] Fix filter with extended columns (#2246) @m4theushw
  • [DataGrid] Remove default value of columnTypes prop (#2280) @m4theushw
  • [DataGrid] Add German (deDE) translation for export and isEmpty operator (#2285) @ChristopherBussick
  • [XGrid] Add details param to each callback option in XGrid (#2236) @DanailH

Docs

Core

Contributors

dtassone, oliviertassinari, and 5 other contributors
Loading

v4.0.0-alpha.35

31 Jul 14:30
@oliviertassinari oliviertassinari
v4.0.0-alpha.35
3aad96e
This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
GPG key ID: 4AEE18F83AFDEB23
Expired
Verified
Learn about vigilant mode.
Compare
Choose a tag to compare
v4.0.0-alpha.35

July 31, 2021

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

@material-ui/[email protected] / @material-ui/[email protected]

Breaking changes

  • [DataGrid] Improve controllable cell edit (#2143) @m4theushw

    • The onEditCellChange prop was renamed to onEditCellPropsChange.
    • The onEditCellChangeCommitted prop was renamed to onCellEditCommit.
    • The onEditRowModelChange prop was removed. Use the new onEditRowsModelChange prop. 
      -onEditRowModelChange?: (params: GridEditRowModelParams)
+onEditRowsModelChange?: (editRowsModel: GridEditRowsModel)

  • [XGrid] Improve controllable cell edit (#2143) @m4theushw

    • The cellEditPropsChange event was renamed to editCellPropsChange.
    • The cellEditPropsChangeCommitted event was renamed to cellEditCommit.
    • The cellValueChange event was removed. Listen to cellEditCommit to detect when the value is committed.
    • The editRowModelChange event was renamed to editRowsModelChange.

  • [DataGrid] Improve controllable pagination (#2099) @flaviendelangle

    • The pageSize is now a controlled prop. If you set a value, you also need to handle updates with onPageSizeChange. See the documentation.

    • Change the controllable API signature:

      // Signature
-onPageChange?: (params: GridPageChangeParams) => void;
+onPageChange?: (page: number) => void;

// Usage
-<DataGrid onPageChange={(params: GridPageChangeParams) => setPage(params.page)} />
+<DataGrid onPageChange={(page: number) => setPage(page)} />
      // Signature
-onPageSizeChange?: (params: GridPageChangeParams) => void;
+onPageSizeChange?: (pageSize: number) => void;

// Usage
-<DataGrid onPageSizeChange={(params: GridPageChangeParams) => setPageSize(params.pageSize)} />
+<DataGrid onPageSizeChange={(pageSize: number) => setPageSize(pageSize)} />

Changes

Docs

Core

Contributors

oliviertassinari, flaviendelangle, and 4 other contributors
Loading

v4.0.0-alpha.34

21 Jul 14:54
@dtassone dtassone
v4.0.0-alpha.34
d30bae4
This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
GPG key ID: 4AEE18F83AFDEB23
Expired
Verified
Learn about vigilant mode.
Compare
Choose a tag to compare
v4.0.0-alpha.34

July 21, 2021

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

@material-ui/[email protected] / @material-ui/[email protected]

Breaking changes

  • [DataGrid] Fix scrollToIndexes behavior (#2162) @oliviertassinari

    Remove public apiRef.current.isColumnVisibleInWindow() as it servers private use cases.

    -apiRef.current.isColumnVisibleInWindow()

  • [DataGrid] Remove stateId argument from GridApi getState method (#2141) @flaviendelangle

    -const filterState = apiRef.current.getState('filter');
+const filterState = apiRef.current.getState().filter;

  • [DataGrid] Improve controllable sorting (#2095) @dtassone

    Normalize the controlled prop signature:

     <DataGrid
-  onSortModelChange={(params: GridSortModelParams) => setSortModel(params.model)}
+  onSortModelChange={(model: GridSortModel) => setSortModel(model)}
 />

  • [DataGrid] Improve controllable filter (#1909) @dtassone

    Normalize the controlled prop signature:

     <DataGrid
-  onFilterModelChange={(params: GridFilterModelParams) => setFilterModel(params.model)}
+  onFilterModelChange={(model: GridFilterModel) => setFilterModel(model)}
 />

  • [DataGrid] Improve the editing API (#1955) @m4theushw

    • The props key in the first argument of commitCellChange was removed to promote the use of the value already stored in the state.
      To update the value in the state, call setEditCellProps before.

      -apiRef.current.commitCellChange({ id: 1, field: 'name', props: { value: 'Ana' } });
+apiRef.current.setEditCellProps({ id: 1, field: 'name', props: { value: 'Ana' } });
+apiRef.current.commitCellChange({ id: 1, field: 'name' });

    • Calling commitCellChange in a cell in view mode will throw an error. Make sure to first enter the edit mode.

      +apiRef.current.setCellMode(1, 'name', 'edit');
apiRef.current.commitCellChange({ id: 1, field: 'name' });

    • The setCellValue was removed from the API. Use commitCellChange or updateRows in place.

      -apiRef.current.setCellValue({ id: 1, field: 'name', value: 'Ana' });
+apiRef.current.updateRows([{ id: 1, name: 'Ana' }]);

      or

      -apiRef.current.setCellValue({ id: 1, field: 'name', value: 'Ana' });
+apiRef.current.setCellMode(1, 'name', 'edit');
+apiRef.current.setEditCellProps({ id: 1, field: 'name', props: { value: 'Ana' } });
+apiRef.current.commitCellChange({ id: 1, field: 'name' });

    • The getEditCellProps was removed because getEditCellPropsParams offers the same functionality.

      -const props = apiRef.current.getEditCellProps(1, 'name');
+const { props } = apiRef.current.getEditCellPropsParams(1, 'name');

      Note: This method will now throw an error if the cell is in view mode.

  • [DataGrid] Implement useControlState hook, and add control state on selectionModel (#1823) @dtassone

    Normalize the controlled prop signature:

     <DataGrid
-  onSelectionModelChange={(params: GridSelectionModelChangeParams) => setSelectionModel(params.model)}
+  onSelectionModelChange={(model: GridSelectionModel) => setSelectionModel(model)}
 />

    Replace onRowSelected with the existing API:

     <DataGrid
-  onRowSelected={(params: GridRowSelectedParams) =>  }
+  onSelectionModelChange={(model: GridSelectionModel) => }
 />

Changes

Docs

Core

Contributors

tifosiblack, dtassone, and 10 other contributors
Loading

v4.0.0-alpha.33

01 Jul 17:04
@DanailH DanailH
v4.0.0-alpha.33
a316c76
This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
GPG key ID: 4AEE18F83AFDEB23
Expired
Verified
Learn about vigilant mode.
Compare
Choose a tag to compare
v4.0.0-alpha.33

July 1, 2021

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

  • 🐞 As a focus of Q2, we have kept fixing bugs

  • 💅 End users are now allowed to copy the selected rows to the clipboard with CTRL + c (#1929) @m4theushw

  • 🐛 We have fixed the Select all checkbox. When triggered, it should only select the filtered rows (#1879) @ZeeshanTamboli

  • ⚡️ We have added a new singleSelect column type (#1956) @DanailH

    Using the column type: 'singleSelect' defaults to Select component when the cell is in edit mode. You can find the documentation following this link.

    <DataGrid
  columns={[
    {
      field: 'country',
      type: 'singleSelect',
      valueOptions: ['France', 'Netherlands', 'Brazil'],
      editable: true,
    }
  ]}
  rows={[
    { id: 0, country: 'France' },
    { id: 1, country: 'Netherlands' },
    { id: 2, country: 'Brazil' },
  ]}
/>

@material-ui/[email protected] / @material-ui/[email protected]

Breaking changes

  • [DataGrid] Rename onColumnResizeCommitted to onColumnWidthChange (#1967) @m4theushw

    -<DataGrid onColumnResizeCommitted={...} />
+<DataGrid onColumnWidthChange={...} />

  • [DataGrid] Make GRID_ROWS_CLEAR private (#1925) @oliviertassinari

    The rowsCleared event was always triggered alongside rowsSet. You can listen to the latter event only.

  • [DataGrid] Fix events naming (#1862) @m4theushw

    The following XGrid events were renamed:

    • columnHeaderNavigationKeydown to columnHeaderNavigationKeyDown
    • columnResizeCommitted to columnWidthChange
    • rowsUpdated to rowsUpdate
    • columnsUpdated to columnsChange

    The following XGrid DOM events were removed:

    • focusout
    • keydown
    • keyup

Changes

Docs

Core

Loading

v4.0.0-alpha.32

18 Jun 22:22
@m4theushw m4theushw
v4.0.0-alpha.32
bc5804d
This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
GPG key ID: 4AEE18F83AFDEB23
Expired
Verified
Learn about vigilant mode.
Compare
Choose a tag to compare
v4.0.0-alpha.32

June 18, 2021

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

  • ⚡️ Components that use portals, like Select and Autocomplete, can now be used in the cell editing (#1772) @m4theushw
  • 📃 Apply the valueFormatter to the CSV exporting (#1922) @DanailH
  • 💅 Rename CSS classes to match the convention of the core components (#1872) @DanailH
  • 🌎 Isolate translations from Material-UI Core and Material-UI X (#1913) @DanailH
  • 🚀 Improve performance when finding column indexes and updating rows (#1903, #1923) @Janpot @N2D4
  • 🐞 Bugfixes

@material-ui/[email protected] / @material-ui/[email protected]

Breaking changes

  • [DataGrid] The onEditCellChangeCommitted prop won't be called with an event when committing changes by clicking outside the cell (#1910) @m4theushw

  • [DataGrid] Translation for Material-UI Core components are no longer included in the Material-UI X translation (#1913) @DanailH

     import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles';
 import { DataGrid, bgBG } from '@material-ui/data-grid';
+import { bgBG as coreBgBG } from '@material-ui/core/locale';

 const theme = createMuiTheme(
   {
     // ...
   },
   bgBG,
+  coreBgBG,
 );

  • [DataGrid] The disableClickEventBubbling prop was removed (#1910) @m4theushw

    The same outcome can be obtained by using the React synthetic event, calling event.stopPropagation():

    -<DataGrid disableClickEventBubbling />
+<DataGrid onCellClick={(event) => event.stopPropagation()} />

  • [DataGrid] Rename CSS classes according to new convention (#1872) @DanailH

    The main grid components:

    • .data-container was removed
    • .MuiDataGrid-columnHeaderSortable was renamed to .MuiDataGrid-columnHeader--sortable
    • .MuiDataGrid-columnHeaderCenter was renamed to .MuiDataGrid-columnHeader--alignCenter
    • .MuiDataGrid-columnHeaderRight was renamed to .MuiDataGrid-columnHeader--alignRight
    • .MuiDataGrid-columnHeader-draggable was renamed to .MuiDataGrid-columnHeaderDraggableContainer
    • .MuiDataGrid-columnHeaderSortable was renamed to .MuiDataGrid-columnHeader--sortable
    • .MuiDataGrid-columnHeaderMoving was renamed to .MuiDataGrid-columnHeader--moving
    • .MuiDataGrid-columnHeaderSorted was renamed to .MuiDataGrid-columnHeader--sorted
    • .MuiDataGrid-columnHeaderNumeric was renamed to .MuiDataGrid-columnHeader--numeric
    • .MuiDataGrid-columnHeader-dropZone was renamed to .MuiDataGrid-columnHeaderDropZone
    • .MuiDataGrid-columnSeparatorResizable was renamed to .MuiDataGrid-columnSeparator--resizable
    • .MuiDataGrid-cellWithRenderer was renamed to .MuiDataGrid-cell--withRenderer
    • .MuiDataGrid-cellLeft was renamed to .MuiDataGrid-cell--textLeft
    • .MuiDataGrid-cellRight was renamed to .MuiDataGrid-cell--textRight
    • .MuiDataGrid-cellCenter was renamed to .MuiDataGrid-cell--textCenter
    • .MuiDataGrid-cellEditing was renamed to .MuiDataGrid-cell--editing
    • .MuiDataGrid-cellEditable was renamed to .MuiDataGrid-cell--editable
    • .MuiDataGrid-editCellBoolean was renamed to .MuiDataGrid-editBooleanCell
    • .MuiDataGrid-editCellInputBase was renamed to .MuiDataGrid-editInputCell
    • .MuiDataGrid-scrollArea-left was renamed to .MuiDataGrid-scrollArea--left
    • .MuiDataGrid-scrollArea-right was renamed to .MuiDataGrid-scrollArea--right

    The standalone components:

    • .MuiDataGridMenu-* was renamed to .MuiGridMenu-*
    • .MuiDataGridPanel-* was renamed to .MuiGridPanel-*
    • .MuiDataGridPanelContent-* was renamed to .MuiGridPanelContent-*
    • .MuiDataGridPanelFooter-* was renamed to .MuiGridPanelFooter-*
    • .MuiDataGridPanelWrapper-* was renamed to .MuiGridPanelWrapper-*
    • .MuiDataGridFilterForm-* was renamed to .MuiGridFilterForm-*
    • .MuiDataGridToolbarFilterButton-* was renamed to .MuiGridToolbarFilterButton-*
    • .MuiDataGrid-footer was renamed to .MuiDataGrid-footerContainer
    • .MuiDataGrid-toolbar was renamed to .MuiDataGrid-toolbarContainer

Changes

Docs

Core

Loading