search

mui / mui-x

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!
https://mui.com/x/
3.91k stars 1.19k forks source link

[data grid] Enhanced Data Manipulation APIs and Rendering Issue with Controlled Rows in Grid Component #12454

Open louisaaron opened 3 months ago

louisaaron commented 3 months ago

Summary

We are requesting the addition of three API functions (api.exportData, api.importData, api.pushToCell) to enable advanced data manipulation capabilities without completely reimplementing the basic grid operations. We are also reporting a bug where changes to controlled row data do not trigger a re-render in certain conditions. These enhancements and fixes are crucial for applications aiming to provide an intuitive, efficient, and spreadsheet-like user experience.

Examples

  1. Cut and Paste Enhancements with api.exportData and api.importData: To mimic spreadsheet behaviors, we need to implement cut operations and customized paste logic. For instance, pasting a 3x1 selection into a 3x3 area should replicate the original selection horizontally across the 3x3 area. This requires that the operations powering copy and paste be accessible otherwise, a complete rewrite of copy-paste logic is required. (at which point paste will no longer appear like an edit) I would propose functions like these: api.exportData(specificCells, useFormatters=false, delimiters, etc.) api.importData(relativeToCell, data, useParsers=true, delimiters, etc.)
  2. Programmatic Cell Updates with api.pushToCell: In our application, numeric column types track the number of decimal places for precision. A feature allows users to round values across all rows in a column to a specified precision via a header component button. Implementing this cleanly demands an API to programmatically update cell values, respecting the grid's internal mechanisms for data handling. api.pushToCell(id, field, value, useParser) It would trigger an edit using the valueParser if requested and end up calling processRowUpdate like a user edit would.
  3. Bug Report - processRowUpdate Rendering Issue: When the grid's rows are treated as a controlled component, updates to the rows state (e.g., through a DAO updating its internal cache) sometimes do not trigger a re-render. This occurs even when processRowUpdate returns the oldRow and the DAO instantly updates the rows state. To reproduce store rows in useState, return the oldRow and call setRows in processRowUpdate and it will not render the change until you leave the cell.

Motivation

Our goal is to offer a seamless and familiar experience to users accustomed to spreadsheet applications like Google Sheets. This involves replicating complex interactions such as cut, paste, and cell modification operations within our grid component. The ability to programmatically manage data while respecting parsers, formatters, rowUpdate and mechanics allows us to create a custom grid component that doesn’t need to reimplement basic features or expose it’s internals in a verbose way.

Supporting a bulk version of processRowUpdate would probably address some of the performance bottlenecks that sometimes require the use of api.updateRows as well as make it much easier to implement features like undo redo, which need to track operations spanning multiple rows (paste, delete selection, round column values, or other custom data manipulation operations.

Thanks for your help here!

Search keywords: Enhanced Data Manipulation APIs and Rendering Issue with Controlled Rows in Grid Component Order ID: 85118

michelengelen commented 3 months ago

Hi @louisaaron, thanks for taking the time to raise this issue. Also thanks for providing such a detailed explanation. I did add this to our board for the team to estimate.

I would kindly ask you to open a new issue for the bug, since we try to keep tasks as small as possible and therefor separate.

Thanks again! 🙇🏼