Skip to content

Releases: mui/mui-x

v5.6.1

10 Mar 16:41
@flaviendelangle flaviendelangle
v5.6.1
f04331c
This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
GPG key ID: 4AEE18F83AFDEB23
Expired
Verified
Learn about vigilant mode.
Compare
Choose a tag to compare
v5.6.1

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

  • [DataGrid] Allow to add margins or borders between rows (#3848) @m4theushw

    <DataGrid getRowSpacing={() => ({ top: 10, bottom: 10 })} />

    Check the documentation for more information.

@mui/[email protected] / @mui/[email protected]

Changes

Docs

Core

Contributors

oliviertassinari, flaviendelangle, and 6 other contributors
Loading

v5.6.0

04 Mar 17:07
@alexfauquette alexfauquette
v5.6.0
d7cb410
This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
GPG key ID: 4AEE18F83AFDEB23
Expired
Verified
Learn about vigilant mode.
Compare
Choose a tag to compare
v5.6.0

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

  • 📦 Use the same bundling scripts as those in the material-ui repository (#3965) @flaviendelangle

    The code structure and the bundling strategy have been modified to provide better isolation between components.
    The bundle size is slightly reduced, but with tree shaking, the doors are open for significant gains in the future. 🏋
    We predict that such modifications could potentially impact edge cases.
    If you encounter problems with your build, please open an issue.
    These issues will have high priority as part of our risk mitigation strategy.

  • 🧼 Clean and document the column selectors (#4010) @flaviendelangle

    Column selectors have been renamed to improve clarity.
    The old names have been deprecated and will be removed in v6.
    Here are the new names and the modifications needed to get the same information with the new selectors.

    Old name New name
    allGridColumnsFieldsSelector gridColumnFieldsSelector
    allGridColumnsSelector gridColumnDefinitionsSelector
    visibleGridColumnsSelector gridVisibleColumnDefinitionsSelector
    filterableGridColumnsSelector gridFilterableColumnDefinitionsSelector 
    -const { all, lookup, columnVisibilityModel } = gridColumnsSelector(apiRef)
+const all = gridColumnFieldsSelector(apiRef)
+const lookup = gridColumnLookupSelector(apiRef)
+const columnVisibilityModel = gridColumnVisibilityModelSelector(apiRef)

-const filterableFields = filterableGridColumnsIdsSelector(apiRef);
+const lookup = gridFilterableColumnLookupSelector(apiRef);
+const filterableFields = gridColumnFieldsSelector(apiRef).filter(field => lookup[field]);

-const visibleColumnsNumber = visibleGridColumnsLengthSelector(apiRef);
+const visibleColumnsNumber = gridVisibleColumnDefinitionsSelector(apiRef).length;

-const { totalWidth, positions } = gridColumnsMetaSelector(apiRef);
+const totalWidth = gridColumnsTotalWidthSelector(apiRef);
+const positions = gridColumnPositionsSelector(apiRef);

  • 📚 Documentation improvements

  • 🐞 Bug and typo fixes

@mui/[email protected] / @mui/[email protected]

Changes

Docs

Core

Contributors

Janpot, oliviertassinari, and 14 other contributors
Loading

v5.5.1

10 Feb 16:29
@cherniavskii cherniavskii
v5.5.1
0f38b95
This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
GPG key ID: 4AEE18F83AFDEB23
Expired
Verified
Learn about vigilant mode.
Compare
Choose a tag to compare
v5.5.1

A big thanks to the 6 contributors who made this release possible. Here are some highlights ✨:

  • 🎛 Add props to customize the behavior of the filter panel (#3497) @alexfauquette

    <DataGrid
  componentsProps={{
    filterPanel: { columnsSort: 'asc' },
  }}
/>

    Check the documentation to see all available props.

  • 📚 Documentation improvements

  • 🐞 Bugfixes

@mui/[email protected] / @mui/[email protected]

Docs

Core

Contributors

oliviertassinari, flaviendelangle, and 5 other contributors
Loading

v5.5.0

04 Feb 13:10
@flaviendelangle flaviendelangle
v5.5.0
56fb02c
This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
GPG key ID: 4AEE18F83AFDEB23
Expired
Verified
Learn about vigilant mode.
Compare
Choose a tag to compare
v5.5.0

A big thanks to the 10 contributors who made this release possible. Here are some highlights ✨:

@mui/[email protected] / @mui/[email protected]

Changes

Docs

Core

Contributors

kasperfilstrup, oliviertassinari, and 8 other contributors
Loading

v5.4.0

28 Jan 16:50
@alexfauquette alexfauquette
v5.4.0
6985fa5
This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
GPG key ID: 4AEE18F83AFDEB23
Expired
Verified
Learn about vigilant mode.
Compare
Choose a tag to compare
v5.4.0

A big thanks to the 9 contributors who made this release possible. Here are some highlights ✨:

  • 🚣 Introduce variable row height (#438) @DanailH

    Allows for setting a row-specific height.
    By default, all rows have the same height, but now you can set the height on a per-row basis.

    <DataGrid 
  getRowHeight={
    ({ id }: GridRowHeightParams) => (id % 2 === 0 ? 100 : null)
  }
/>

  • 🎁 Add new CSV export option: getRowsToExport (#3687) @flaviendelangle

  • 📚 Documentation improvements

  • 🐞 Bugfixes

@mui/[email protected] / @mui/[email protected]

Changes

Docs

Core

Contributors

oliviertassinari, flaviendelangle, and 7 other contributors
Loading

v5.3.0

21 Jan 15:09
@DanailH DanailH
v5.3.0
6a90f95
Compare
Choose a tag to compare
v5.3.0

A big thanks to the 9 contributors who made this release possible. Here are some highlights ✨:

  • 🎁 Allow to group rows based on column value (#3277) @flaviendelangle

    ⚠️ This feature is temporarily available on the Pro plan until the release of the Premium plan.

    To avoid future regression for users of the Pro plan, the feature needs to be explicitly activated using the rowGrouping experimental feature flag.

    // To fully control
<DataGridPro
  rowGroupingModel={rowGroupingModel}
  onRowGroupingModel={newModel => setRowGroupingModel(newModel)}
  experimentalFeatures={{ rowGrouping: true }}
/>

// To initialize without controlling
<DataGridPro
  initialState={{
    rowGrouping: {
      model: rowGroupingModel,
    },
  }}
  experimentalFeatures={{ rowGrouping: true }}
/>

    For more details see the introduction blog post and documentation.

  • ⚡ Add is any of filter operator (#2874) @alexfauquette

    The new filter operator is any of allows the user to provide multiple values. It opens access to complex filtering pattern mixing AND and OR logic connectors, such as status is any of filled or rejected, and currency is any of EUR or USD.

  • ✨ Introduce a maxWidth property in GridColDef (#3550) @flaviendelangle

    You can now limit the width of the flex columns and the resizable columns with the new maxWidth property on GridColDef.

    const columns: GridColDef[] = [
  { field: 'director', flex: 1, maxWidth: 200 }, // will take the free space up to 200px and will not be resizable above 200px
  { field: 'year', maxWidth: 150 }, // will not be resizable above 150px
]

  • 🚀 Add component slots for a subset of used @mui/material components (#3490) @DanailH

    To make the grid more flexible we added component slots for base @mui/material components that we use. Those component slots are prefixed with Base to differentiate them from the other grid specific components

    For more information check the documentation documentation.

  • 🔥 Allow to pass csvOptions and printOptions to toolbar component prop (#3623) @flaviendelangle

    const CustomDataGrid = (props: DataGridProps) => {
  return (
    <DataGrid {...props} componentsProps={{ toolbar: { csvOptions: { delimiter: ';' } } }} />
  )
}

  • 🙈 Add controlled behavior for the visible columns (#3554) @flaviendelangle

    // To fully control
<DataGrid
  columnVisibilityModel={columnVisibilityModel}
  onColumnVisilibilityModelChange={newModel => setColumnVisibilityModel(newModel)}
/>

// To initialize without controlling
<DataGrid
  initialState={{
    columns: {
      columnVisibilityModel
    }
  }}
/>

    See the documentation for more details.

    The hide property from GridColDef still works but has been deprecated.

  • 📚 Documentation improvements

  • 🐞 Bugfixes

@mui/[email protected] / @mui/[email protected]

Changes

Docs

Core

Contributors

oliviertassinari, flaviendelangle, and 7 other contributors
Loading

v5.2.2

06 Jan 16:26
@flaviendelangle flaviendelangle
v5.2.2
0e1ce2d
This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
GPG key ID: 4AEE18F83AFDEB23
Expired
Verified
Learn about vigilant mode.
Compare
Choose a tag to compare
v5.2.2

A big thanks to the 9 contributors who made this release possible. Here are some highlights ✨:

  • 🎁 Add hideable option to GridColDef (#3433) @m4theushw
  • ⚡ Add support for column-based sortingOrder with the new sortingOrder option in GridColDef (#3449) @Quppa
  • ✨ Allow to initialize the page and pageSize without controlling them with the initialState prop (#3495) @flaviendelangle
  • 🙈 Allow to precisely control which children rows to expand with the new isGroupExpandedByDefault prop (#3444) @flaviendelangle
  • 🌍 Add Finnish (fiFI) locale (#3485) @kurkle
  • 📚 Documentation improvements
  • 🐞 Bugfixes

@mui/[email protected] / @mui/[email protected]

Changes

Docs

Core

Contributors

Quppa, oliviertassinari, and 8 other contributors
Loading

v5.2.1

17 Dec 16:06
@alexfauquette alexfauquette
v5.2.1
1ed95e1
This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
GPG key ID: 4AEE18F83AFDEB23
Expired
Verified
Learn about vigilant mode.
Compare
Choose a tag to compare
v5.2.1

A big thanks to the 8 contributors who made this release possible. Here are some highlights ✨:

  • 🖨️ Improve the print export to break the pages correctly (#3302) @flaviendelangle
  • 🎁 Add pinnable option to GridColDef (#3425) @m4theushw
  • 📚 Documentation improvements
  • 🐞 Bugfixes

@mui/[email protected] / @mui/[email protected]

Changes

Core

Docs

Contributors

oliviertassinari, flaviendelangle, and 5 other contributors
Loading

v5.2.0

09 Dec 17:11
@DanailH DanailH
v5.2.0
d00e759
Compare
Choose a tag to compare
v5.2.0

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

@mui/[email protected] / @mui/[email protected]

  • 🚀 Introduce the column pinning feature (#2946) @m4theushw

  • 🔥 Add ability to disable export options (#3270) @alexfauquette

    You can disable either export options by setting disableToolbarButton to true.

    <GridToolbarExport csvOptions={{ disableToolbarButton: true }} />
    <GridToolbarExport printOptions={{ disableToolbarButton: true }} />

  • 🙈 Add a new option to hide the amount of descendant on the grouping cells of the Tree Data (#3368) @flaviendelangle

    <DataGridPro
  treeData
  rows={rows}
  columns={columns}
  groupingColDef={{ hideDescendantCount }}
/>

  • ⚠️ Deprecate the getValue param for the valueGetter callback (#3314) @flaviendelangle

    Instead, you can access directly the row in the params

    -valueGetter: (params) => `${params.getValue(params.id, 'firstName') || ''} ${params.getValue(params.id, 'lastName') || ''}`
+valueGetter: (params) => `${params.row.firstName || ''} ${params.row.lastName || ''}`

  • 📚 Documentation improvements

  • 🐞 Bugfixes

Changes

Core

Docs

Contributors

oliviertassinari, flaviendelangle, and 3 other contributors
Loading

v5.1.0

02 Dec 17:31
@m4theushw m4theushw
v5.1.0
7c3facb
This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
GPG key ID: 4AEE18F83AFDEB23
Expired
Verified
Learn about vigilant mode.
Compare
Choose a tag to compare
v5.1.0

A big thanks to the 11 contributors who made this release possible. Here are some highlights ✨:

@mui/[email protected] / @mui/[email protected]

  • 🚀 Introduce the tree data feature (#2725) @flaviendelangle

  • 💅 Add support for sx prop in the DataGrid and DataGridPro (#3281) @m4theushw

  • 🔦 Improve focus management in the filter panel (#3004) @alexfauquette

  • 🎁 Add strict typing to the event publisher and listener (#3022) (@flaviendelangle)

    The apiRef.current.subscribeEvent, apiRef.current.publishEvent and useGridApiEventHandler are now fully typed and gives you the correct arguments based on the event you are listening to or emitting.

    const handleRowClick: GridEventListener<'rowClick'> = (
  params, // has type `GridRowParams`
  event, // has type `MuiEvent<React.MouseEvent<HTMLElement>>
  details, // has type `GridCallbackDetails
) => {
  /* ... */
};

// with string event name
apiRef.current.subscribeEvent('rowClick', handleRowClick);
useGridApiEventHandler(apiRef, 'rowClick', handleRowClick);

// or with enum event name
apiRef.current.subscribeEvent(GridEvents.rowClick, handleRowClick);
useGridApiEventHandler(apiRef, GridEvents.rowClick, handleRowClick);

  • 🌎 Translation updates for many locales

    If you are using DataGrid or DataGridPro in another language, check this issue to discover which translations are missing.

  • 📚 Documentation improvements

  • 🐞 Bugfixes

Changes

Core

Docs

Contributors

gjoseph, oliviertassinari, and 9 other contributors
Loading