Skip to content

v4.0.0-alpha.18
Compare
Choose a tag to compare
@oliviertassinari oliviertassinari released this 26 Jan 15:07
· 6720 commits to master since this release
v4.0.0-alpha.18
3fd0768
Jan 26, 2021

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

  • 🎁 Add support for Material-UI v5-alpha (#855) @DanailH.
    The data grid supports Material-UI v4 and v5. We aim to retain the support for v4 as long as v5 hasn't reached the beta phase. If you using v5, use the documentation of the component for v4.

  • 💅 Update the customization API to be closer to Material-UI v5. (#890, #851, #879) @dtassone
    The date grid accepts two props: components and componentsProps.
    The first prop allows to swapping specific components used in slots the grid, like the checkboxes.
    The second one allows providing extra props to each slot. It avoids the need for using the React context to access information from outside the data grid.

    See the RFC for more details.

  • 🐛 Polish existing features, fix 3 issues.

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

Breaking changes

  • [DataGrid] Implement customization pattern of Material-UI v5 (#851, #879) @dtassone

    • Capitalize the keys of the components prop. This change aims to bring consistency with the customization pattern of Material-UI v5:
    <DataGrid
  components={{
-   noRowsOverlay: CustomNoRowsOverlay,
+   NoRowOverlay: CustomNoRowsOverlay,
  }}
/>
    • Move all the icon components overrides in the components prop. And added the suffix 'Icon' on each icon component. This change aims to bring consistency with the customization pattern of Material-UI v5:
    <DataGrid
- icons: {{
-   ColumnSortedAscending: SortedAscending,
- }},
+ components={{
+   ColumnSortedAscendingIcon: SortedAscending,
+ }}
/>
    • Change the props provided to the component of the components prop. Expose the whole state instead of an arbitrary set of props:
    -function CustomPagination(props: ComponentProps) {
-  const { pagination, api } = props;
+function CustomPagination(props: BaseComponentProps) {
+  const { state, api } = props;

   return (
     <Pagination
-      page={pagination.page}
-      count={pagination.pageCount}
+      page={state.pagination.page}
+      count={state.pagination.pageCount}

// ...

<DataGrid components={{ Pagination: CustomPagination }} />

Changes

  • [DataGrid] Add customisation on panels (#890) @dtassone
  • [DataGrid] Add support for Material-UI v5-alpha (#855) @DanailH
  • [DataGrid] Fix footer count not shown on small screen (#899) @mnajdova
  • [DataGrid] Fix column selector crash when hiding columns (#875) @DanailH
  • [DataGrid] Fix Shift + Space keyboard regression to select row (#897) @dtassone

Docs

Core

Assets 2
Loading