MUI X: Build complex and data-rich applications using a growing list of advanced React components, like the Data Grid, Date and Time Pickers, Charts, and more!
Apr 22, 2021
Big thanks to the 7 contributors who made this release possible. Here are some highlights β¨:
π Release the cell editing feature (#1287) @dtassone
This is the first release of the Cell editing feature. You can find the documentation following this link. We have spent the last three months working on it.
π A focus on bug fixes and documentation improvements
disableColumnSelector
(#1429) @ZeeshanTamboli[core] Setup e2e tests (#1443) @DanailH
This infrastructure relies on Playwright to control Chrome with the end-to-end API. It differentiates from our current end-to-end tests by running outside of the browser (Karma runs inside). It's slower and doesn't have a great DX, but it allows to test things like the Tab behavior.
Published by dtassone over 3 years ago
Apr 14, 2021
Big thanks to the 5 contributors who made this release possible. Here are some highlights β¨:
[DataGrid] Add support for custom row ids without cloning (#1377) @m4theushw
This change has involved the following refactorings.
apiRef.current
.- getRowModels: () => GridRowModel[];
+ getRowModels: () => Map<GridRowId, GridRowModel>;
- getVisibleRowModels: () => GridRowModel[];
+ getVisibleRowModels: () => Map<GridRowId, GridRowModel>;
- getSelectedRows: () => GridRowModel[];
+ getSelectedRows: () => Map<GridRowId, GridRowModel>;
GridFilterModelParams
.export interface GridFilterModelParams {
/**
* The full set of rows.
*/
- rows: GridRowModel[];
+ rows: Map<GridRowId, GridRowModel>;
/**
* The set of currently visible rows.
*/
- visibleRows: GridRowModel[];
+ visibleRows: Map<GridRowId, GridRowModel>;
}
Published by m4theushw over 3 years ago
Apr 2, 2021
Big thanks to the 8 contributors who made this release possible. Here are some highlights β¨:
GridBaseComponentProps
through the props. To use the GridBaseComponentProps
call the useGridSlotComponentProps
hook. (#1252) @DanailHGridSlotsComponent
changed (#1252) @DanailHGridBaseComponentProps
type to GridSlotComponentProps
(#1252) @DanailHuseGridBaseComponentProps
hook to useGridSlotComponentProps
(#1252) @DanailHGRID_COL_REORDER_START
-> GRID_COLUMN_REORDER_START
(#1299) @m4theushwonColItemDragStart
, onColHeaderDragOver
, onColItemDragOver
, onColItemDragEnter
removed from the grid API. Prefer listening to column reordering events (#1299) @m4theushwapiRef.current.getColumnHeaderParams
returns a GridColumnHeaderParams
instead of GridColParams
(#1299) @m4theushwGRID_COLUMN_HEADER_xxx
will be called with a GridColumnHeaderParams
instead of GridColParams
(#1299) @m4theushwrenderHeader
will be called with a GridColumnHeaderParams
instead of GridColParams
(#1299) @m4theushwapiRef.current.moveColumn
was renamed to apiRef.current.setColumnIndex
(#1299) @m4theushwPublished by DanailH over 3 years ago
Mar 22, 2021
Big thanks to the 7 contributors who made this release possible. Here are some highlights β¨:
π Add onRowsScrollEnd
to support infinite loading (#1199) @DanailH
This is an XGrid feature. Provides the ability to tap into the onRowsScrollEnd
which is called when the scroll reaches the bottom of the grid viewport allowing developers to load additional data. It can be used with a combination of scrollBottomThreshold
to control the area in which the onRowsScrollEnd
is called.
See the documentation for more details.
πΉ Provide the ability to sort by multiple columns using Shift+click (#1203) @dtassone
π΅π± Added plPL locale (#1117) @LarsKumbier
β‘οΈ Edit cell accessibility (#1205) @dtassone
π Bugfixes
Published by DanailH over 3 years ago
Mar 9, 2021
Big thanks to the 6 contributors who made this release possible. Here are some highlights β¨:
Feb 27, 2021
Big thanks to the 7 contributors who made this release possible. Here are some highlights β¨:
π Add support for CSV export (#1030) @DanailH.
This is the first iteration of the feature. You can either render the GridToolbarExport
component in the toolbar or use the apiRef exportDataAsCsv
/getDataAsCsv
methods.
See the documentation for more details.
π Improve the support for custom locales (#1096, #1079, #1109, #1077)
βΏοΈ Fix a couple of accessibility issues with the popups (#1105, #1102)
[DataGrid] Prefix all public API to fit into the global Material-UI namespace (#1069) @DanailH
This change gets the data grid one step closer to a stable release. It allows the data grid to fit into the global namespace of Material-UI. All the exported modules should have a unique name. It allows the search features, in Google, in the docs, and in the codebase to work effectively and efficiently.
For the mirgration, prefixing a broken import with "grid" is often enough. In the case it's not working, head to the pull request's description. It details all the changes.
Published by dtassone over 3 years ago
Feb 17, 2021
Big thanks to the 4 contributors who made this release possible. Here are some highlights β¨:
selectionModel
prop (#986) @dtassone[DataGrid] Remove sortDirection
from column definitions. Consolidate around fewer ways of doing the same thing. (#1015) @dtassone
-columns[1] = { ...columns[1], sortDirection: 'asc' };
return (
<div>
- <DataGrid rows={rows} columns={columns} />
+ <DataGrid rows={rows} columns={columns} sortModel={[{ field: columns[1].field, sort: 'asc' }]} />
</div>
[DataGrid] Rename the onSelectionChange
prop to onSelectionModelChange
for consistency. (#986) @dtassone
-<DataGrid onSelectionChange={selectionChangeHandler} />
+<DataGrid onSelectionModelChange={onSelectionModelChangeHandler} />
[DataGrid] Remove showToolbar
prop (#948) @DanailH
-import { DataGrid } from '@material-ui/data-grid';
+import { DataGrid, GridToolbar } from '@material-ui/data-grid';
-<DataGrid showToolbar />
+<DataGrid components={{ Toolbar: GridToolbar }} />
[DataGrid] Change page index base, from 1 to 0. (#1021) @dtassone
This change is done for consistency with TablePagination
and JavaScript arrays that are 0-based. Material-UI still uses a 1-base page for the Pagination
component that matches the URL's query.
-const [page, setPage] = React.useState(1);
+const [page, setPage] = React.useState(0);
return (
<div className="grid-container">
<DataGrid rows={rows} columns={columns} page={page} />
</div>
Published by DanailH over 3 years ago
Big thanks to the 5 contributors who made this release possible. Here are some highlights β¨:
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.
[DataGrid] Implement customization pattern of Material-UI v5 (#851, #879) @dtassone
components
prop. This change aims to bring consistency with the customization pattern of Material-UI v5:<DataGrid
components={{
- noRowsOverlay: CustomNoRowsOverlay,
+ NoRowOverlay: CustomNoRowsOverlay,
}}
/>
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,
+ }}
/>
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 }} />
Published by dtassone almost 4 years ago
Big thanks to the 4 contributors who made this release possible. Here are some highlights β¨:
π Add support for Column selector (#837) @DanailH @dtassone.
The feature can be triggered from the toolbar or the column menu. Check the documentation.
π A focus on fixing regressions from previous releases refactoring and bugs.
onPageChange
firing too often (#838) @dtassonehideFooter
prop (#846) @dtassonePublished by DanailH almost 4 years ago
Big thanks to the 2 contributors who made this release possible. Here are some highlights β¨:
Big thanks to the 5 contributors who made this release possible. Here are some highlights β¨:
π Add support for internationalization (#718) @DanailH
You can use the localeText
prop to provide custom wordings in the data grid.
Check the documentation for a demo.
π Start documenting the filtering feature π§ͺ (#754) @dtassone
The work in progress filtering feature and documentation can be found following this link. Early feedback are welcome.
Published by DanailH almost 4 years ago
Big thanks to the 4 contributors who made this release possible. Here are some highlights β¨:
Published by dtassone almost 4 years ago
Big thanks to the 6 contributors who made this release possible. Here are some highlights β¨:
Big thanks to the 8 contributors who made this release possible. Here are some highlights β¨:
[XGrid] Rows refactoring, flatten RowModel, remove RowData (#668) @dtassone
These changes simplify the API and avoid confusion between RowData
and RowModel
.
Now we only have RowModel which is a flat object containing an id and the row data. It is the same object as the items of the rows
prop array.
The API to change update the rows using apiRef has changed:
-apiRef.current.updateRowDate()
+apiRef.current.updateRows()
-apiRef.current.setRowModels()
+apiRef.current.setRows()
apiRef.current.updateRowModels
has been removed, please use apiRef.current.updateRows
.
Published by DanailH almost 4 years ago
Published by dtassone almost 4 years ago
Published by oliviertassinari about 4 years ago
Published by DanailH about 4 years ago
Published by oliviertassinari about 4 years ago