Skip to content

Releases: mui/mui-x

v4.0.0-alpha.36

06 Aug 11:18
eb34684
Compare
Choose a tag to compare

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

v4.0.0-alpha.35

31 Jul 14:30
3aad96e
Compare
Choose a tag to compare

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

v4.0.0-alpha.34

21 Jul 14:54
d30bae4
Compare
Choose a tag to compare

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

v4.0.0-alpha.33

01 Jul 17:04
a316c76
Compare
Choose a tag to compare

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

v4.0.0-alpha.32

18 Jun 22:22
bc5804d
Compare
Choose a tag to compare

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

v4.0.0-alpha.31

09 Jun 14:51
4509391
Compare
Choose a tag to compare

June 9, 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] Improve headerClassName type (#1778) @DanailH

    cellClassName and headerClassName no longer accept array of strings.

    -cellClassName?: string | string[] | (params: GridCellParams) => string;
    +cellClassName?: string | (params: GridCellParams) => string;
    -headerClassName?: string | string[];
    +headerClassName?: string | (params: GridColumnHeaderParams) => string;

Changes

Docs

Core

v4.0.0-alpha.30

31 May 08:20
0c189f7
Compare
Choose a tag to compare

May 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] Rename toolbar components for consistency (#1724) @DanailH

    Prefix all the toolbar-related components with GridToolbar.

    -.MuiDataGridFilterToolbarButton-list
    +.MuiDataGridToolbarFilterButton-list
    -<GridColumnsToolbarButton />
    +<GridToolbarColumnsButton />
    -<GridFilterToolbarButton />
    +<GridToolbarFilterButton />
    -<GridDensitySelector />
    +<GridToolbarDensitySelector />
  • [DataGrid] Remove cellClassRules from GridColDef (#1716) @m4theushw

    The GridCellClassParams type is not exported anymore. Replace it with GridCellParams.

    -import { GridCellClassParams} from '@material-ui/data-grid';
    +import { GridCellParams } from '@material-ui/data-grid';
    
    -cellClassName: (params: GridCellClassParams) =>
    +cellClassName: (params: GridCellParams) =>

    The cellClassRules in GridColDef was removed because it's redundant. The same functionality can be obtained using cellClassName and the clsx utility:

    +import clsx from 'clsx';
    
     {
       field: 'age',
       width: 150,
    -  cellClassRules: {
    -    negative: params => params.value < 0,
    -    positive: params => params.value > 0,
    -  },
    +  cellClassName: params => clsx({
    +    negative: params.value < 0,
    +    positive: params.value > 0,
    +  }),
     }
  • [DataGrid] Fix onPageChange doesn't update the page when a pagination button is clicked (#1719) @ZeeshanTamboli

    Fix naming of pageChange and pageSizeChange events variables. The correct event variable name should be prefixed with GRID_ and converted to UPPER_CASE.

    -import { GRID_PAGESIZE_CHANGED, GRID_PAGE_CHANGED } from '@material-ui/data-grid';
    +import { GRID_PAGESIZE_CHANGE, GRID_PAGE_CHANGE } from '@material-ui/data-grid';
  • [XGrid] The getEditCellValueParams method was removed from the apiRef (#1767) @m4theushw

    The getEditCellValueParams method was almost a straightforward alias of getEditCellPropsParams.

    -const { value } = apiRef.current.getEditCellValueParams(id, field);
    +const { props: { value } } = apiRef.current.getEditCellPropsParams(id, field);

Changes

Docs

Core

4.0.0-alpha.29

19 May 15:33
fc36c05
Compare
Choose a tag to compare

May 19, 2021

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

  • 🚀 Performance increased when filtering, sorting, and rendering (#1513) @dtassone

  • 💅 Add columnHeader, row and cell to the classes prop (#1660) @DanailH

  • ✅ Add the isRowSelectable prop to disable selection on certain rows (#1659) @m4theushw

    See the documentation for more details.

  • ⚡️ Add new icon slot to be displayed when the column is unsorted (#1415) @m4theushw

  • ⚙ Improve consistency of the API to prepare for the first beta release

  • 🐞 Bugfixes

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

Breaking changes

  • [DataGrid] Remove the properties element, rowIndex, and colIndex from all params arguments (#1513) @dtassone

    You can use the following apiRef methods to replace some of them:

    -params.rowIndex
    -params.colIndex
    +apiRef.current.getRowIndex(params.id)
    +apiRef.current.getColumnIndex(params.field)
  • [DataGrid] Calling params.getValue now requires the id to be passed (#1513) @dtassone

    -params.getValue(field)
    +params.getValue(params.id, field)
  • [DataGrid] Rename CSS classes (#1660) @DanailH

    1. MuiDataGrid-colCellWrapper to MuiDataGrid-columnHeaderWrapper
    2. MuiDataGrid-colCell to MuiDataGrid-columnHeader
    3. MuiDataGrid-colCellCheckbox to MuiDataGrid-columnHeaderCheckbox
    4. MuiDataGrid-colCellSortable to MuiDataGrid-columnHeaderSortable
    5. MuiDataGrid-colCellCenter to MuiDataGrid-columnHeaderCenter
    6. MuiDataGrid-colCellLeft to MuiDataGrid-columnHeaderLeft
    7. MuiDataGrid-colCellRight to MuiDataGrid-columnHeaderRight
  • [XGrid] Calling setCellFocus now requires the id and field to be passed (#1513) @dtassone

    -apiRef.current.setCellFocus: (indexes: GridCellIndexCoordinates) => void;
    +apiRef.current.setCellFocus: (id: GridRowId, field: string) => void;
  • [XGrid] Rename apiRef methods (#1513) @dtassone

    Changes on apiRef.current:

    -apiRef.current.getRowIndexFromId: (id: GridRowId) => number;
    +apiRef.current.getRowIndex: (id: GridRowId) => number;
  • [XGrid] Rename apiRef methods (#1667) @m4theushw

    Changes on apiRef.current:

    -apiRef.current.getColumnFromField: (field: string) => GridColDef;
    -apiRef.current.getRowFromId: (id: GridRowId) => GridRowModel;
    +apiRef.current.getColumn: (field: string) => GridColDef;
    +apiRef.current.getRow: (id: GridRowId) => GridRowModel;

Changes

Docs

Core

v4.0.0-alpha.28

10 May 18:37
0a373ee
Compare
Choose a tag to compare

May 10, 2021

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

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

Breaking changes

  • [XGrid] Rename apiRef toggleColumn method for consistency (#1578) @DanailH

    -apiRef.current.toggleColumn: (field: string, forceHide?: boolean) => void;
    +apiRef.current.setColumnVisibility: (field: string, isVisible: boolean) => void;
  • [XGrid] Fix event typo (#1574) @DanailH

    -import { GRID_COLUMN_RESIZE_COMMITED } from '@material-ui/x-grid';
    +import { GRID_COLUMN_RESIZE_COMMITTED } from '@material-ui/x-grid';

Changes

Docs

Core

v4.0.0-alpha.27

30 Apr 10:59
378ae55
Compare
Choose a tag to compare

Apr 30, 2021

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

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

Breaking changes

  • [core] Drop support for Node v10 (#1499) @ZeeshanTamboli

  • [XGrid] Remove onAction APIs (#1453) @DanailH

    These event handlers on the apiRef were duplicating with the react props
    and the event subscribe API. Changes on apiRef.current:

    -onFilterModelChange
    -onPageChange
    -onPageSizeChange
    -onResize
    -onUnmount
    -onRowSelected
    -onSelectionModelChange
    -onSortModelChange
    -onStateChange

    Note: These methods are available as React props.

  • [XGrid] Refactor useGridColumnResize (#1380) @DanailH

    Changes on apiRef.current:

    -startResizeOnMouseDown
    +setColumnWidth

Changes

Docs

Core