@mui/x-data-grid
Advanced tools
Changelog
7.0.0-beta.4
Feb 23, 2024
We'd like to offer a big thanks to the 10 contributors who made this release possible. Here are some highlights ✨:
legacy
bundle that used to support old browsers like IE 11 is no longer included..MuiDataGrid-cellContent
has been removed, use .MuiDataGrid-cell
to style the cells.Changelog
7.0.0-beta.3
Feb 16, 2024
We'd like to offer a big thanks to the 8 contributors who made this release possible. Here are some highlights ✨:
🎁 Charts get a built in grid
<img src="https://github.com/mui/mui-x/assets/45398769/74299f54-f020-4135-b38c-dc88a230db30" width="510" alt="Charts Grid" />🎛️ Charts get a Gauge component.
<img src="https://github.com/mui/mui-x/assets/45398769/fb7a94b5-bef6-4fc2-a0cd-d6ff5b60fa8b" width="510" alt="Guage Chart" />🐞 Bugfixes
📚 Documentation improvements
rowEditCommit
event and the related prop onRowEditCommit
was removed. The processRowUpdate
prop can be used in place.Changelog
7.0.0-beta.2
Feb 9, 2024
We'd like to offer a big thanks to the 15 contributors who made this release possible. Here are some highlights ✨:
Changelog
7.0.0-beta.1
Feb 1, 2024
We'd like to offer a big thanks to the 12 contributors who made this release possible. Here are some highlights ✨:
🏃 Improve the filtering performance of the Data Grid by changing the GridColDef
methods signatures (#11573) @cherniavskii
🎁 The Line Chart component now has animation by default (#11620) @alexfauquette
🚀 All charts have click handlers (#11411) @alexfauquette Test their respective documentation demonstrations to know more about the data format:
Big thanks to @giladappsforce and @yaredtsy for their contribution on exploring this feature.
The signature of GridColDef['valueGetter']
has been changed for performance reasons:
- valueGetter: ({ value, row }) => value,
+ valueGetter: (value, row, column, apiRef) => value,
The GridValueGetterParams
interface has been removed:
- const customValueGetter = (params: GridValueGetterParams) => params.row.budget;
+ const customValueGetter: GridValueGetterFn = (value, row) => row.budget;
The signature of GridColDef['valueFormatter']
has been changed for performance reasons:
- valueFormatter: ({ value }) => value,
+ valueFormatter: (value, row, column, apiRef) => value,
The GridValueFormatterParams
interface has been removed:
- const gridDateFormatter = ({ value, field, id }: GridValueFormatterParams<Date>) => value.toLocaleDateString();
+ const gridDateFormatter: GridValueFormatter = (value: Date) => value.toLocaleDateString();
The signature of GridColDef['valueSetter']
has been changed for performance reasons:
- valueSetter: (params) => {
- const [firstName, lastName] = params.value!.toString().split(' ');
- return { ...params.row, firstName, lastName };
- }
+ valueSetter: (value, row) => {
+ const [firstName, lastName] = value!.toString().split(' ');
+ return { ...row, firstName, lastName };
+}
The GridValueSetterParams
interface has been removed:
- const setFullName = (params: GridValueSetterParams) => {
- const [firstName, lastName] = params.value!.toString().split(' ');
- return { ...params.row, firstName, lastName };
- };
+ const setFullName: GridValueSetter<Row> = (value, row) => {
+ const [firstName, lastName] = value!.toString().split(' ');
+ return { ...row, firstName, lastName };
+ }
The signature of GridColDef['valueParser']
has been changed for performance reasons:
- valueParser: (value, params: GridCellParams) => value.toLowerCase(),
+ valueParser: (value, row, column, apiRef) => value.toLowerCase(),
The signature of GridColDef['colSpan']
has been changed for performance reasons:
- colSpan: ({ row, field, value }: GridCellParams) => (row.id === 'total' ? 2 : 1),
+ colSpan: (value, row, column, apiRef) => (row.id === 'total' ? 2 : 1),
The signature of GridColDef['pastedValueParser']
has been changed for performance reasons:
- pastedValueParser: (value, params) => new Date(value),
+ pastedValueParser: (value, row, column, apiRef) => new Date(value),
The signature of GridColDef['groupingValueGetter']
has been changed for performance reasons:
- groupingValueGetter: (params) => params.value.name,
+ groupingValueGetter: (value: { name: string }) => value.name,