From a2020340df3e90e69be9bbd7787857155aeac371 Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Thu, 7 Nov 2024 22:51:40 +0100 Subject: [PATCH] [docs] Add () for updateRows method (#15251) Signed-off-by: Olivier Tassinari Co-authored-by: Flavien DELANGLE --- CHANGELOG.md | 3 +-- changelogOld/CHANGELOG.v4.md | 10 +++++----- changelogOld/CHANGELOG.v5.md | 10 +++++----- changelogOld/CHANGELOG.v6.md | 6 +++--- docs/data/data-grid/editing/editing.md | 18 +++++++++--------- .../recipes-editing/recipes-editing.md | 6 +++--- docs/data/data-grid/row-updates/row-updates.md | 10 +++++----- .../migration-data-grid-v5.md | 4 ++-- 8 files changed, 33 insertions(+), 34 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 2dac6eb4e0c4..d533a40da0ca 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -861,10 +861,9 @@ No changes since `@mui/x-tree-view@7.12.0`. ### Docs -- [docs] Add a warning to promote the usage of `updateRows` (#14027) @MBilalShafi +- [docs] Add a warning to promote the usage of `updateRows()` (#14027) @MBilalShafi - [docs] Disable ad in `Rich Tree View-Ordering` page (#14123) @oliviertassinari - [docs] Redesign Date and Time Pickers overview page (#13241) @noraleonte - - [CHANGELOG] Polish details @oliviertassinari - [code-infra] Use concurrency 1 in CircleCI (#14110) @JCQuintas - [infra] Re-added the removal of `Latest Version` section (#14132) @michelengelen diff --git a/changelogOld/CHANGELOG.v4.md b/changelogOld/CHANGELOG.v4.md index 965d4bf04e18..b100730eeef2 100644 --- a/changelogOld/CHANGELOG.v4.md +++ b/changelogOld/CHANGELOG.v4.md @@ -378,8 +378,8 @@ Big thanks to the 11 contributors who made this release possible. Here are some - [DataGrid] Improve the editing API (#1955) @m4theushw - - The `props` key in the first argument of `commitCellChange` was removed to promote the use of the value already stored in the state. - To update the value in the state, call `setEditCellProps` before. + - The `props` key in the first argument of `commitCellChange()` was removed to promote the use of the value already stored in the state. + To update the value in the state, call `setEditCellProps()` before. ```diff -apiRef.current.commitCellChange({ id: 1, field: 'name', props: { value: 'Ana' } }); @@ -387,14 +387,14 @@ Big thanks to the 11 contributors who made this release possible. Here are some +apiRef.current.commitCellChange({ id: 1, field: 'name' }); ``` - - Calling `commitCellChange` in a cell in view mode will throw an error. Make sure to first enter the edit mode. + - Calling `commitCellChange()` in a cell in view mode throws an error. Make sure to first enter the edit mode. ```diff +apiRef.current.setCellMode(1, 'name', 'edit'); apiRef.current.commitCellChange({ id: 1, field: 'name' }); ``` - - The `setCellValue` was removed from the API. Use `commitCellChange` or `updateRows` in place. + - The `setCellValue()` was removed from the API. Use `commitCellChange()` or `updateRows()` in place. ```diff -apiRef.current.setCellValue({ id: 1, field: 'name', value: 'Ana' }); @@ -1807,7 +1807,7 @@ Big thanks to the 8 contributors who made this release possible. Here are some h +apiRef.current.setRows() ``` - `apiRef.current.updateRowModels` has been removed, please use `apiRef.current.updateRows`. + `apiRef.current.updateRowModels()` has been removed, please use `apiRef.current.updateRows()`. #### Changes diff --git a/changelogOld/CHANGELOG.v5.md b/changelogOld/CHANGELOG.v5.md index e4378fb582ed..d022428c0a6b 100644 --- a/changelogOld/CHANGELOG.v5.md +++ b/changelogOld/CHANGELOG.v5.md @@ -34,7 +34,7 @@ We'd like to offer a big thanks to the 5 contributors who made this release poss #### Changes - [DataGrid] Allow to pass props to the `FocusTrap` inside the panel wrapper (#7897) @Vivek-Prajapatii -- [DataGrid] Avoid unnecessary rerenders after `updateRows` (#7945) @cherniavskii +- [DataGrid] Avoid unnecessary rerenders after `updateRows()` (#7945) @cherniavskii - [DataGridPro] Change cursor when dragging a column (#7878) @sai6855 - [DataGridPremium] Fix `leafField` to have correct focus value (#7959) @MBilalShafi @@ -332,7 +332,7 @@ We'd like to offer a big thanks to the 7 contributors who made this release poss - [DataGrid] Fix `ErrorOverlay` not receiving defined input props (#6885) @banoth-ravinder - [DataGrid] Improve typing for `styleOverrides` (#6980) @iigrik -- [DataGridPro] Fix lazy-loaded rows not working with `updateRows` API method (#6875) @cherniavskii +- [DataGridPro] Fix lazy-loaded rows not working with `updateRows()` API method (#6875) @cherniavskii - [l10n] Fix translation of `filterOperatorBefore` in Arabic (ar-SD) locale (#6917) @HassanGhazy ### `@mui/x-date-pickers@v5.0.9` / `@mui/x-date-pickers-pro@v5.0.9` @@ -2184,7 +2184,7 @@ A big thanks to the 9 contributors who made this release possible. Here are some - [DataGrid] Fix `isRowSelectable` when `paginationMode='server'` (#3647) @flaviendelangle - [DataGrid] Fix browser keyboard shortcuts not working when header cell is focused (#3692) @valenfv - [DataGrid] Fix focus on checkbox cells (#3501) @alexfauquette -- [DataGrid] Only update the visibility status of the updated columns when calling `apiRef.current.updateRows` (#3735) @flaviendelangle +- [DataGrid] Only update the visibility status of the updated columns when calling `updateRows()` (#3735) @flaviendelangle - [DataGrid] Prevent commit if `preProcessEditCellProps` resolves with an error (#3612) @m4theushw - [DataGrid] Update selected rows when turning off `checkboxSelection` (#3684) @m4theushw - [DataGrid] Variable row height (#3218) @DanailH @@ -2726,10 +2726,10 @@ A big thanks to the 7 contributors who made this release possible. Here are some #### Changes -- [DataGrid] Block multi-rows updates in `apiRef.current.updateRows` on the Community plan (#3095) @flaviendelangle +- [DataGrid] Block multi-rows updates in `updateRows()` on the Community plan (#3095) @flaviendelangle - [DataGrid] Fix filter not working after deleting the value (#3018) @m4theushw - [DataGrid] Fix performance regression when selecting 100k rows (#3077) @m4theushw -- [DataGrid] Fix `apiRef.current.updateRows` to not share rows from other instances (#3127) @m4theushw +- [DataGrid] Fix `updateRows()` to not share rows from other instances (#3127) @m4theushw - [DataGrid] Fix flex space allocation to not cause a horizontal scroll when there is enough space (#3099) @flaviendelangle - [DataGrid] Improve the filter panel behaviors (#3080) @flaviendelangle - [DataGrid] Fix keyboard navigation between column headers and rows when not on the first page (#3086) @flaviendelangle diff --git a/changelogOld/CHANGELOG.v6.md b/changelogOld/CHANGELOG.v6.md index df02a516936d..d0e557ed1e5e 100644 --- a/changelogOld/CHANGELOG.v6.md +++ b/changelogOld/CHANGELOG.v6.md @@ -2625,7 +2625,7 @@ We'd like to offer a big thanks to the 7 contributors who made this release poss - [DataGrid] Fix missing watermark in Pro and Premium packages (#8797) @cherniavskii - [DataGrid] Remove unwarranted warning log (#8847) @romgrk - [DataGrid] Add Joy UI slots (`Select`, `SelectOption`, `InputLabel`, `FormControl`) (#8747) @cherniavskii -- [DataGridPremium] Fix expanded groups being collapsed after calling `updateRows` (#8823) @cherniavskii +- [DataGridPremium] Fix expanded groups being collapsed after calling `updateRows()` (#8823) @cherniavskii ### `@mui/x-date-pickers@6.3.1` / `@mui/x-date-pickers-pro@6.3.1` @@ -3256,7 +3256,7 @@ We'd like to offer a big thanks to the 8 contributors who made this release poss - [DataGrid] Add interface for `singleSelect` column (#7685) @m4theushw - [DataGrid] Allow to pass props to the `FocusTrap` inside the panel wrapper (#7733) @ivek-Prajapatii -- [DataGrid] Avoid unnecessary rerenders after `updateRows` (#7857) @cherniavskii +- [DataGrid] Avoid unnecessary rerenders after `updateRows()` (#7857) @cherniavskii - [DataGridPro] Change cursor when dragging a column (#7725) @sai6855 - [DataGridPremium] Fix `leafField` to have correct focus value (#7950) @MBilalShafi @@ -4362,7 +4362,7 @@ We'd like to offer a big thanks to the 14 contributors who made this release pos - [DataGrid] Stop exporting root base state selectors (#6912) @DanailH - [DataGrid] Support `theme.vars` (#6784) @alexfauquette - [DataGrid] Rename `rowsScroll` event to `scrollPositionChange` (#6957) @DanailH -- [DataGridPro] Fix lazy-loaded rows not working with `updateRows` API method (#6976) @cherniavskii +- [DataGridPro] Fix lazy-loaded rows not working with `updateRows()` API method (#6976) @cherniavskii - [DataGridPremium] Improve typing for theme in `styleOverrides` (#6920) @m4theushw - [l10n] Fix translation of `filterOperatorBefore` in Arabic (ar-SD) locale (#6884) @HassanGhazy diff --git a/docs/data/data-grid/editing/editing.md b/docs/data/data-grid/editing/editing.md index 5d10456d299a..825c82b146ea 100644 --- a/docs/data/data-grid/editing/editing.md +++ b/docs/data/data-grid/editing/editing.md @@ -162,7 +162,7 @@ The callback is called with three arguments: 3. An object with additional properties such as `rowId`. Please note that the `processRowUpdate` must return the row object to update the Data Grid internal state. -The value returned is used later as an argument on a call to `apiRef.current.updateRows`. +The value returned is used later as an argument on a call to `apiRef.current.updateRows()`. ```tsx { @@ -77,7 +77,7 @@ The **Account** column is automatically updated with the correct options. {{"demo": "LinkedFieldsRowEditing.js", "bg": "inline", "defaultCodeOpen": false}} :::warning -The call to `apiRef.current.setEditCellValue` returns a promise that must be awaited. +The call to `apiRef.current.setEditCellValue()` returns a promise that must be awaited. For instance, if the `singleSelect` column type is used, not awaiting will cause the other column to be rendered with a `value` that is not in the options. ```ts @@ -93,7 +93,7 @@ const handleChange = async () => { ::: A similar behavior can be reproduced with cell editing. -Instead of `apiRef.current.setEditCellValue`, the `rows` prop must be updated or `apiRef.current.updateRows` be used. +Instead of `apiRef.current.setEditCellValue()`, the `rows` prop must be updated or `apiRef.current.updateRows()` be used. Note that the `onCellEditStart` and `onCellEditStop` props also have to be used to revert the value of the cell changed, in case the user cancels the edit. {{"demo": "LinkedFieldsCellEditing.js", "bg": "inline", "defaultCodeOpen": false}} diff --git a/docs/data/data-grid/row-updates/row-updates.md b/docs/data/data-grid/row-updates/row-updates.md index de92e0b8f5c6..043969d910c0 100644 --- a/docs/data/data-grid/row-updates/row-updates.md +++ b/docs/data/data-grid/row-updates/row-updates.md @@ -14,16 +14,16 @@ It replaces the previous values. This approach has some drawbacks: :::warning Updating the `rows` prop causes the Data Grid to recompute the row tree, resulting in losing the current tree information like the expanded rows state. -Unless the recomputation is explicitly required, the API method `updateRows` should be used. +Unless the recomputation is explicitly required, the API method `updateRows()` should be used. ::: -## The `updateRows` method +## The `updateRows()` method -If you want to only update part of the rows, you can use the `apiRef.current.updateRows` method. +If you want to only update part of the rows, you can use the `apiRef.current.updateRows()` method. {{"demo": "UpdateRowsApiRef.js", "bg": "inline"}} -The default behavior of `updateRows` API is to upsert rows. +The default behavior of `updateRows()` API is to upsert rows. So if a row has an id that is not in the current list of rows then it will be added to the Data Grid. Alternatively, if you would like to delete a row, you would need to pass an extra `_action` property in the update object as below. @@ -33,7 +33,7 @@ apiRef.current.updateRows([{ id: 1, _action: 'delete' }]); ``` :::info -The community version of the Data Grid is limited to a single row update per `apiRef.current.updateRows` call. +The community version of the Data Grid is limited to a single row update per `apiRef.current.updateRows()` call. Multiple row updates at a time are supported in [Pro](/x/introduction/licensing/#pro-plan) and [Premium](/x/introduction/licensing/#premium-plan) plans. ::: diff --git a/docs/data/migration/migration-data-grid-v5/migration-data-grid-v5.md b/docs/data/migration/migration-data-grid-v5/migration-data-grid-v5.md index ddeb5beb6b7b..b3a97f317123 100644 --- a/docs/data/migration/migration-data-grid-v5/migration-data-grid-v5.md +++ b/docs/data/migration/migration-data-grid-v5/migration-data-grid-v5.md @@ -297,8 +297,8 @@ Most of this breaking change is handled by `preset-safe` codemod but some furthe + const focusedField = props.focusedCell; + const tabIndex = props.tabbableCell === column.field ? 0 : 1; ``` -- Updating the [`rows` prop](/x/react-data-grid/row-updates/#the-rows-prop) or calling `apiRef.current.setRows` will now remove the expansion state of the grid as these methods are meant to replace the rows. - For partial row updates, use the [`apiRef.current.updateRows`](/x/react-data-grid/row-updates/#the-updaterows-method) method instead. +- Updating the [`rows` prop](/x/react-data-grid/row-updates/#the-rows-prop) or calling `apiRef.current.setRows()` will now remove the expansion state of the grid as these methods are meant to replace the rows. + For partial row updates, use the [`apiRef.current.updateRows()`](/x/react-data-grid/row-updates/#the-updaterows-method) method instead. ### Pagination