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/
4.56k stars 1.33k forks source link

DataGrid State Management #11147

Open ChrisOMills opened 1 year ago

ChrisOMills commented 1 year ago

The problem in depth 🔍

I am reaching out for assistance regarding an issue I've encountered with the MUI DataGrid component. My goal is to access the state of data within the grid from an external component.

Issue Description: I am working with a DataGrid that initially contains around 500 rows. I have implemented a feature to filter these rows based on a specific classification. For instance, after applying a filter, I might end up with 200 rows that match the criteria. My requirement is to access the full data of these 200 filtered rows in an array format outside of the grid. This is necessary to perform further data manipulation and analysis, such as counting how many of these rows meet certain conditions.

Attempted Solutions: I have tried using apiRef.current to achieve this, but I am only able to access the IDs of each row, not the full data. It seems like there used to be apiRef.current.getVisibleRowModels(); which would have done what I want but it's not there anymore. Did something replace it?

I setup a test project just to showcase this: https://codesandbox.io/p/sandbox/data-grid-state-watching-f6fc4p

Request: Could you please provide guidance or suggestions on how I can access the full data of filtered rows? Are there specific methods or properties of the DataGrid API that I should use for this purpose? Any example code or documentation references would be greatly appreciated.

Thank you for your assistance and I look forward to your response.

Your environment 🌎

`npx @mui/envinfo` ``` System: OS: macOS 13.2.1 Binaries: Node: 21.1.0 - /usr/local/bin/node Yarn: 1.22.19 - /usr/local/bin/yarn npm: 10.2.3 - ~/scs-soc-frontend/node_modules/.bin/npm Browsers: Chrome: 119.0.6045.159 Edge: Not Found Safari: 16.3 npmPackages: @emotion/react: ^11.11.1 => 11.11.1 @emotion/styled: ^11.11.0 => 11.11.0 @mui/base: 5.0.0-beta.18 @mui/core-downloads-tracker: 5.14.18 @mui/icons-material: ^5.14.16 => 5.14.16 @mui/lab: ^5.0.0-alpha.147 => 5.0.0-alpha.147 @mui/material: ^5.14.18 => 5.14.18 @mui/private-theming: 5.14.18 @mui/styled-engine: 5.14.18 @mui/system: 5.14.18 @mui/types: 7.2.9 @mui/utils: 5.14.18 @mui/x-data-grid: 6.18.0 @mui/x-data-grid-premium: ^6.18.0 => 6.18.0 @mui/x-data-grid-pro: 6.18.0 @mui/x-date-pickers: ^6.18.1 => 6.18.1 @mui/x-date-pickers-pro: ^6.18.1 => 6.18.1 @mui/x-license-pro: ^6.10.2 => 6.10.2 @mui/x-tree-view: 6.0.0-alpha.1 @types/react: ^18.2.25 => 18.2.25 react: ^18.2.0 => 18.2.0 react-dom: ^18.2.0 => 18.2.0 typescript: ^5.2.2 => 5.2.2 ```

Search keywords: filtered state Order ID: 78407

ChrisOMills commented 1 year ago

I wanted to add a little more here. I found in the migration notes here: https://mui.com/x/migration/migration-data-grid-v5/ That: The apiRef.current.getVisibleRowModels method was removed. Use gridExpandedSortedRowEntriesSelector selector instead. When I search the documentation nothing comes up other than the migration document and searching Google does the same.

ChrisOMills commented 1 year ago

ok I was able to figure it out with gridExpandedSortedRowEntriesSelector, sorry, there should be some documentation on this.

flaviendelangle commented 1 year ago

@cherniavskii @joserodolfofreitas we have a PR from @alexfauquette that is related to this topic: https://github.com/mui/mui-x/pull/4257