mui/mui-x v5.0.0-beta.4 on GitHub

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

[DataGrid] Add row and cell component slots (#2753) @m4theushw
[DataGrid] Rename gridCheckboxSelectionColDef to GRID_CHECKBOX_SELECTION_COL_DEF (#2793) @flaviendelangle
[DataGrid] Clean hook folder structure and stop exporting internal hooks (#2789) @flaviendelangle
[DataGrid] Add support for Print export (#2519) @DanailH
[DataGrid] Remove internal localization and column type constant exports (#2791) @flaviendelangle
[DataGrid] Remove GridRowCells component (#2811) @m4theushw
[DataGrid] Remove class constants exports (#2788) @flaviendelangle
[DataGrid] Remove unused event listeners on GridCell and GridRow (#2810) @m4theushw
[DataGrid] Fix the header selection checkbox to work with prop.checkboxSelectionVisibleOnly (#2781) @flaviendelangle

Docs

[docs] Add link to installation page (#2778) @MostafaKMilly
[docs] Add redirect from docs home page to DataGrid home page (#2737) @flaviendelangle
[docs] Fix JSX closing tag in getActions example (#2847) @dstarner
[docs] Fix pagination in Ant Design demo (#2787) @ZeeshanTamboli
[docs] Update the page prop docs (#2812) @m4theushw

Core

[core] Update hooks to initialize their state synchronously (#2782) @flaviendelangle
[core] Fix rollup external warnings (#2736) @eps1lon