github mui/mui-x v4.0.0-alpha.20
4.0.0-alpha.20

latest releases: v7.3.2, v7.3.1, v7.3.0...
3 years ago

Feb 17, 2021

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

  • 📍 Add support for default locales (#983) @DanailH
    We have built the infrastructure to support around 100 default locales. If you have localized the data grid in your application. Please do consider contributing new translations back to Material-UI by opening a pull request.
  • 🎁 Add new selectionModel prop (#986) @dtassone
    The prop can be used to control the selected rows in the data grid. See the docs.
  • 💅 Add support for default props from theme (#1019) @DanailH
  • 🙌 Fix scrollbar size on windows (#1061) @dtassone
  • 🐛 Polish existing features, fix 9 issues.

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

Breaking changes

  • [DataGrid] Remove sortDirection from column definitions. Consolidate around fewer ways of doing the same thing. (#1015) @dtassone

    -columns[1] = { ...columns[1], sortDirection: 'asc' };
    
    return (
      <div>
    -   <DataGrid rows={rows} columns={columns} />
    +   <DataGrid rows={rows} columns={columns} sortModel={[{ field: columns[1].field, sort: 'asc' }]} />
      </div>
  • [DataGrid] Rename the onSelectionChange prop to onSelectionModelChange for consistency. (#986) @dtassone

    -<DataGrid onSelectionChange={selectionChangeHandler} />
    +<DataGrid onSelectionModelChange={onSelectionModelChangeHandler} />
  • [DataGrid] Remove showToolbar prop (#948) @DanailH

    -import { DataGrid } from '@material-ui/data-grid';
    +import { DataGrid, GridToolbar } from '@material-ui/data-grid';
    
    -<DataGrid showToolbar />
    +<DataGrid components={{ Toolbar: GridToolbar }} />
  • [DataGrid] Change page index base, from 1 to 0. (#1021) @dtassone
    This change is done for consistency with TablePagination and JavaScript arrays that are 0-based. Material-UI still uses a 1-base page for the Pagination component that matches the URL's query.

    -const [page, setPage] = React.useState(1);
    +const [page, setPage] = React.useState(0);
    
    return (
      <div className="grid-container">
        <DataGrid rows={rows} columns={columns} page={page} />
      </div>

Changes

Docs

Core

Don't miss a new mui-x release

NewReleases is sending notifications on new releases.