Comments (19)
@DanailH gentle ping! 🙇🏼
from mui-x.
This looks like a regression introduced in 6.18.3
v6.18.2: https://codesandbox.io/p/sandbox/dgp-cellupdate-bug-forked-4skj6q
v6.18.3: https://codesandbox.io/p/sandbox/dgp-cellupdate-bug-forked-mqfp7x
from mui-x.
@atsoy thanks for reporting this. The issue is with the return value of the 'handleProcessRowUpdate' - it should be an array with the mutated row objects. You can see it working here: https://codesandbox.io/p/sandbox/dgp-cellupdate-bug-forked-2slznj?file=%2Fsrc%2Fdemo.tsx%3A110%2C32
from mui-x.
Thanks @DanailH and HNY.
In the provided example Typescript complains about types for processRowUpdate
, since it expects just a R
.
Was already surprised, cause we've used to return a single row, not an array.
from mui-x.
@atsoy I check it again, there indeed might be a problem with the valueFormatter
in combination with processRowUpdate
. I'll investigate a bit more and see what I can find.
from mui-x.
Why do you need to keep your rows in the state? This seems to be causing the problem. if you check this example the issue will be more visible: https://mui.com/x/react-data-grid/editing/#server-side-persistence
from mui-x.
Thanks for checking @DanailH !
The example I've provided based on local state, in reality we use reducer (useReducer), where our data is being stored. Users can manipulate table data and then send it to the server (not after each edit stop, but form like - pressing on submit button).
I'm not sure I understand the view point of "storing data in state seems to be causing the issue". Updated data is being set properly. Please elaborate.
P.S: The process of updating the rows, formatting updated values etc worked without issues by using processRowUpdate
and valueFormatter
until we've upgraded the version to ~6.18.3
(previous version was ~6.12.1
) Today tested with 6.18.7
from mui-x.
Hi @michelengelen @DanailH , I understand that you're working on this project voluntarily, and I truly appreciate the time and effort you invest in it. If possible, could you provide an ETA for when this issue might be fixed?
Thank you once again for your dedication to the project!
from mui-x.
@atsoy I'm sorry for the delay. I checked it again and the issue is that handleProcessRowUpdate
expects a return value - the updated row. As far as I can tell you are updating your state that contains the rows and then expect the grid to rerender with the new values which doesn't happen. You need to return the updated value of the row you are editing with the handleProcessRowUpdate
.
I've updated the example again https://codesandbox.io/p/sandbox/dgp-cellupdate-bug-forked-9kxt24
from mui-x.
@DanailH thanks for coming back!
I actually do not really understand, why should I manipulate the newRow
to display updated product of 2 fields. I mean in the example I've provided - it was simplified by using useState
, in reality we use useReducer
.
I've updated provided example.
As far as I can tell you are updating your state that contains the rows and then expect the grid to rerender with the new values which doesn't happen.
It actually happens, but after that, I assume grid re-renders after some effect and restores probably from internal grid state.
from mui-x.
@mui/xgrid can someone take a look? It might be that I don't understand the issue.
from mui-x.
While this looked like a regression at first glance, I'm not sure about this now.
I've created a simplified demo with a delay after updating the rows' state.
With the delay, the issue is reproducible in both 6.18.2 and 6.18.3:
v6.18.2: https://codesandbox.io/p/sandbox/dgp-cellupdate-bug-forked-qf8769
v6.18.3: https://codesandbox.io/p/sandbox/dgp-cellupdate-bug-forked-vf2zn7
Added delay makes it clear that it's a race condition - the rows
state gets updated with a new total
field value, but the newRow
returned from processRowUpdate
has the old total
value.
Before 6.18.3, the rows
state update takes precedence over newRow
, but starting from 6.18.3 the newRow
it's not the case anymore.
@atsoy Before we proceed with further investigation, did you consider using valueGetter
to derive the total column? Here's a demo: https://codesandbox.io/p/sandbox/dgp-cellupdate-bug-forked-wy8qgp
from mui-x.
@cherniavskii thanks for your input!
Before we proceed with further investigation, did you consider using valueGetter to derive the total column? Here's a demo: https://codesandbox.io/p/sandbox/dgp-cellupdate-bug-forked-wy8qgp
Yes, I'll try to use that as a workaround and will give an update
P.S: I'm not sure if it's the right place, but did you or do you consider to provide e.g an option / method to access the current grid data as it is (since there are already possibilities to export CSV or printable data).
from mui-x.
do you consider to provide e.g an option / method to access the current grid data as it is
The same data that you pass to the grid through the rows
prop? What is the use case for this?
from mui-x.
Sorry, I mean of course not the same data, which is provided to rows
, but the current State of it (e.g after some data manipulations).
Use case e.g to get avoid usage of useState
and useReducer
and get the data direct out of grid (let's say for submitting a form with some other fields and grid data).
from mui-x.
Hey @cherniavskii , thanks again for the provided workaround idea. I've implemented it in multiple tables. However I think I found another bug, which is be related to the existing one (or may be have same source):
In case of the let's say price field i expect the input like 2,33
or 2.33
, which will be validated, parsed and stored as 2.33
in the reducer state. In case user types 2,33
(with comma), it renders NaN
in the end, but should actually show 2.33
(with dot).
I didn't add the preProcessEditProps
validation, but we have one, which checks the input and shows error if something is wrong (as a tooltip).
See example
If you uncomment (valueGetter) it will work fine, but still not the desired functionality (imo), because of provided data, which should be updated in the internal grid state as well and rendered in cells.
Or I might understand the grid component design and purpose wrong..
from mui-x.
to follow up: will this be considered as a bug or may be analized? I ask because of this statement.
Before 6.18.3, the rows state update takes precedence over newRow, but starting from 6.18.3 the newRow it's not the case anymore.
from mui-x.
Hey @atsoy
Sorry for the late reply!
I've looked into the codesandbox you provided.
First of all, the reason you see NaN
after editing is that you use the string
column type (it's a default) for numeric data, this is why the string is not parsed into the number properly. Adding type: "number"
solves the issue.
Then, I uncommented the valueGetter
for the total
column since you want to derive the value for this column from other fields of the row.
Here's a working demo: https://codesandbox.io/p/sandbox/dgp-cellupdate-bug-forked-93cfzv?file=%2Fsrc%2Fdemo.tsx
Note, that the row data passed to processRowUpdate
is now properly parsed.
Is this the desired result?
from mui-x.
I mean of course not the same data, which is provided to rows, but the current State of it (e.g after some data manipulations).
Not sure if you're still going to need it, but you can get a single row using API object - apiRef.current.getRow(id)
.
To get all row data, you can use gridRowsLookupSelector(apiRef)
to get the rows lookup and then convert it to an array.
Hope this helps!
from mui-x.
Related Issues (20)
- [pickers] Can't start project using MUI and Remix + Vite. SyntaxError: Named export 'AdapterLuxon' not found. HOT 12
- [Datagrid v7] Error when resizing pinned columns HOT 5
- [data grid] noResultsOverlayLabel not visible after filtering when no absolute height is set HOT 2
- [data grid] Set column ordering for MUI DataGrid from view using apiRef.current.restoreState? HOT 1
- [data grid] Editable Cell Tabbing HOT 7
- [pickers] Bug with the `autoComplete` HTML attribute HOT 2
- [charts] Remove dependency on Material UI
- [charts] How do I customize edges/radius on bar charts? HOT 3
- [data grid] What's the best way to style two ranges differently to show two user presences HOT 4
- [data grid] Select all children rows in Row-Group HOT 7
- [data grid] Duplicating columns when grouping. HOT 5
- [data grid] Can't remove Tooltip when text is not truncate in DataGridPremium HOT 4
- [docs] Clarify what "experimental" and "unstable" means for the new features
- [data grid] Is there a way to determine if a table can horizontally scroll? HOT 8
- [data grid] Show All Button Return Empty Object in GridToolbarColumnsButton HOT 8
- [data grid] checkboxSelection throws error HOT 4
- [data grid] scrollToIndexes not working properly when getRowHeight set to `auto` HOT 9
- [DataGrid] `renderCell` `params.row` values on an auto-generated grouping row HOT 1
- [data grid] `renderCell params.row` values on an auto-generated grouping row HOT 3
- [pickers] Tooltip above the first selected date (to showcase minimum stay required) HOT 7
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from mui-x.