@mui/x-data-grid-pro - npm Package Versions

🏃 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.

Data Grid

Breaking changes

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,

6.19.3

Diff

lukastyla

published 6.19.3 • 5 months ago

7.0.0-beta.0

Diff

noraleonte

published 7.0.0-beta.0 • 5 months ago

Changelog

Source

7.0.0-beta.0

Jan 26, 2024

We are glad to announce MUI X v7 beta! This version has several improvements, bug fixes, and exciting features 🎉. We want to offer a big thanks to the 7 contributors who made this release possible ✨:

🚀 Release the Date Time Range Picker component (#9528) @LukasTy
<img src="https://github.com/mui/mui-x/assets/4941090/122bb7bc-5e72-4e11-a8e5-96f3026de922" width="510" height="652" alt="Date Time Range Picker example" />
🎁 New column management panel design for the Data Grid (#11770) @MBilalShafi
<img width="310" alt="image" src="https://github.com/mui/mui-x/assets/12609561/a79dac8b-d54d-4e69-a63a-ef78f3993f37">
🐞 Bugfixes
📚 Documentation improvements

Data Grid

Breaking changes

The columns management component has been redesigned and the component was extracted from the ColumnsPanel which now only serves as a wrapper to display the component above the headers as a panel. As a result, a new slot columnsManagement and the related prop slotProps.columnsManagement have been introduced. The props corresponding to the columns management component which were previously passed to the prop slotProps.columnsPanel should now be passed to slotProps.columnsManagement. slotProps.columnsPanel could still be used to override props corresponding to the Panel component used in ColumnsPanel which uses Popper component under the hood.
```
 <DataGrid
  slotProps={{
-   columnsPanel: {
+   columnsManagement: {
      sort: 'asc',
      autoFocusSearchField: false,
    },
  }}
 />
```
Show all and Hide all buttons in the ColumnsPanel have been combined into one Show/Hide All toggle in the new columns management component. The related props disableShowAllButton and disableHideAllButton have been replaced with a new prop disableShowHideToggle.
```
 <DataGrid
-  disableShowAllButton
-  disableHideAllButton
+  disableShowHideToggle
 />
```

6.19.2

Diff

noraleonte

published 6.19.2 • 5 months ago

6.19.1

Diff

michelengelen

published 6.19.1 • 5 months ago

7.0.0-alpha.9

Diff

michelengelen

published 7.0.0-alpha.9 • 5 months ago

Changelog

Source

7.0.0-alpha.9

Jan 19, 2024

We'd like to offer a big thanks to the 11 contributors who made this release possible. Here are some highlights ✨:

🎁 The Data Grid headers have been refactored to bring immense improvements to scrolling, state management, and overall performance of the grid.
⚙️ The Data Grid disabled column-specific features like filtering, sorting, grouping, etc. could now be accessed programmatically. See the related docs section.
🚀 Uplift the SimpleTreeView customization examples (#11424) @noraleonte
🌍 Add Croatian (hr-HR), Portuguese (pt-PT), and Chinese (Hong Kong) (zh-HK) locales (#11668) on the Data Grid @BCaspari
🐞 Bugfixes
💔 Bump @mui/material peer dependency for all packages (#11692) @LukasTy The minimum required version of @mui/material is now 5.15.0.

Data Grid

Breaking changes

The ariaV7 experimental flag has been removed and the Data Grid now uses the improved accessibility implementation by default. If you were using the ariaV7 flag, you can remove it from the experimentalFeatures prop:

-<DataGrid experimentalFeatures={{ ariaV7: true }} />
+<DataGrid />

The most notable changes that might affect your application or tests are:

The role="grid" attribute along with related ARIA attributes are now applied to the inner div element instead of the root div element:

-<div class="MuiDataGrid-root" role="grid" aria-colcount="5" aria-rowcount="101" aria-multiselectable="false">
+<div class="MuiDataGrid-root">
   <div class="MuiDataGrid-toolbarContainer"></div>
-    <div class="MuiDataGrid-main"></div>
+    <div class="MuiDataGrid-main" role="grid" aria-colcount="5" aria-rowcount="101" aria-multiselectable="false"></div>
   <div class="MuiDataGrid-footerContainer"></div>
 </div>

When the Tree data feature is used, the grid role is now role="treegrid" instead of role="grid".
The Data Grid cells now have role="gridcell" instead of role="cell".

The buttons in toolbar composable components GridToolbarColumnsButton, GridToolbarFilterButton, GridToolbarDensity, and GridToolbarExport are now wrapped with a tooltip component and have a consistent interface. To override some props corresponding to the toolbar buttons or their corresponding tooltips, you can use the slotProps prop. Following is an example diff. See Toolbar section for more details.

  function CustomToolbar() {
    return (
      <GridToolbarContainer>
      <GridToolbarColumnsButton />
      <GridToolbarFilterButton
  -     title="Custom filter" // 🛑 This was previously forwarded to the tooltip component
  +     slotProps={{ tooltip: { title: 'Custom filter' } }} // ✅ This is the correct way now
      />
      <GridToolbarDensitySelector
  -     variant="outlined"    // 🛑 This was previously forwarded to the button component
  +     slotProps={{ button: { variant: 'outlined' } }} // ✅ This is the correct way now
      />
      </GridToolbarContainer>
    );
  }

Column grouping is now enabled by default. The flag columnGrouping is no longer needed to be passed to the experimentalFeatures prop to enable it.
```
-<DataGrid experimentalFeatures={{ columnGrouping: true }} />
+<DataGrid />
```
The column grouping API methods getColumnGroupPath and getAllGroupDetails are no longer prefixed with unstable_.
The column grouping selectors gridFocusColumnGroupHeaderSelector and gridTabIndexColumnGroupHeaderSelector are no longer prefixed with unstable_.
The disabled column specific features like hiding, sorting, filtering, pinning, row grouping, etc could now be controlled programmatically using initialState, respective controlled models, or the API object. See the related docs section.

7.0.0-alpha.8

Diff

alexandrefauquette

published 7.0.0-alpha.8 • 6 months ago

Changelog

Source

7.0.0-alpha.8

Jan 11, 2024

We'd like to offer a big thanks to the 7 contributors who made this release possible. Here are some highlights ✨:

⏰ Support date-fns v3 (#11659) @LukasTy Pickers support both v2 and v3 of date-fns. For v3 use AdapterDateFnsV3.

// with date-fns v2.x
import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
import de from 'date-fns/locale/de';

// with date-fns v3.x
import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFnsV3';
import { de } from 'date-fns/locale/de';

Data Grid

Breaking changes

The import path for locales has been changed:

-import { enUS } from '@mui/x-data-grid';
+import { enUS } from '@mui/x-data-grid/locales';

-import { enUS } from '@mui/x-data-grid-pro';
+import { enUS } from '@mui/x-data-grid-pro/locales';

-import { enUS } from '@mui/x-data-grid-premium';
+import { enUS } from '@mui/x-data-grid-premium/locales';

7.0.0-alpha.7

Diff

flaviendelangle

published 7.0.0-alpha.7 • 6 months ago

Changelog

Source

7.0.0-alpha.7

Jan 5, 2024

We'd like to offer a big thanks to the 7 contributors who made this release possible. Here are some highlights ✨:

🎁 New component to create a Tree View from a structured data source:

You can now directly pass your data to the RichTreeView component instead of manually converting it into JSX TreeItem components:

const ITEMS = [
  {
    id: 'node-1',
    label: 'Node 1',
    children: [
      { id: 'node-1-1', label: 'Node 1.1' },
      { id: 'node-1-2', label: 'Node 1.2' },
    ],
  },
  {
    id: 'node-2',
    label: 'Node 2',
  },
];

<RichTreeView
  items={MUI_X_PRODUCTS}
  defaultCollapseIcon={<ExpandMoreIcon />}
  defaultExpandIcon={<ChevronRightIcon />}
/>;

🌍 Improve Czech (cs-CZ) locale on the Data Grid
🐞 Bugfixes

Data Grid

Previous 1

…

18 Next

7.0.0-beta.2

.css-1z04cui{margin-bottom:var(--chakra-space-4);font-size:var(--chakra-fontSizes-md);}7.0.0-beta.2

Data Grid

6.19.4

7.0.0-beta.1

7.0.0-beta.1

Data Grid

Breaking changes

6.19.3

7.0.0-beta.0

7.0.0-beta.0

Data Grid

Breaking changes

6.19.2

6.19.1

7.0.0-alpha.9

7.0.0-alpha.9

Data Grid

Breaking changes

7.0.0-alpha.8

7.0.0-alpha.8

Data Grid

Breaking changes

7.0.0-alpha.7

7.0.0-alpha.7

Data Grid

7.0.0-beta.2