[DataGridPremium] gridExpandedRowCountSelector showing count for previously applied filters

[tielushko]

Steps to reproduce 🕹

Link to live example: https://codesandbox.io/s/gridexpandedrowcountselector-showing-old-filter-count-ytlugm

Steps:

1. Type "James" in the quick filter window.
2. Note how the count of the filtered rows is 6 (out of total of 6 rows) when in reality only 3 rows are shown (displayed by the footer).
3. Hit "X" to clear the quick filter.
4. note how the quick filter items got cleared, but the count of filtered rows is still 3 (when it should be 6).

Current behavior 😯

gridExpandedRowCountSelector stores the count when the previous filter model applied to the data grid rows

Expected behavior 🤔

I expect the gridExpandedRowCountSelector to show the count of filtered rows after the filters were applied. I understand that there's a debounce happening before the model changed and the filter got implemented, however then the count of rows should change accordingly as it does with the footer.

Context 🔦

No response

Your environment 🌎

npx @mui/envinfo

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

Order ID or Support key 💳 (optional)

62502

[cherniavskii]

Hey @tielushko
Can you tell us more about your use case? How would you use the value returned by gridExpandedRowCountSelector?

[cherniavskii]

To explain the current behavior - the filterModelChange event is fired after the filter model is updated and before the rows state is recalculated with the new filtering model.

[tielushko]

Hi @cherniavskii , thank you for getting back to me so quickly!

I use it in my logic that determined how many rows are going to be displayed on the data grid and apply autoHeight property on the data grid or set it within a specific container height. See the issue mentioned here: #8516. In order to resolve my problem, I subscribed to rowExpansion, rowGroupingModelChange and I wanted to subscribe to filterModelChange for when the number of rows is below a certain max threshold, we can apply the autoHeight property on the grid.

is there an event that I can subscribe to that will give me the number of filtered rows after the filtering process was done? I was just under the impression that the selector will work since the documentation mentioned it's applied after the filtering process.

Thanks!

[m4theushw]

Internally we have the filteredRowsSet event that is fired after the filtering process is done, however, it's not documented because we may change or remove it in the future. For now, you can use a workaround which is to wrap the selector call in setTimeout (example). This will ensure that it's called after all computations.

I was just under the impression that the selector will work since the documentation mentioned it's applied after the filtering process.

What we want to mean is that the returned rows are those that survived the filtering process, not that the selector will react to model changes.

[cherniavskii]

I'll look into it later to see how we can support autoHeight with max height limit

[tielushko]

@m4theushw Thank you for your suggestion. I will use it in my code right away.

@cherniavskii, I think that would be such an amazing addition to the data grid!!! autoHeight up to a certain max threshold is a must for my customer, and if it could be controlled through passing props, that would be awesome.

[tielushko]

Internally we have the filteredRowsSet event that is fired after the filtering process is done, however, it's not documented because we may change or remove it in the future. For now, you can use a workaround which is to wrap the selector call in setTimeout (example). This will ensure that it's called after all computations.

I was just under the impression that the selector will work since the documentation mentioned it's applied after the filtering process.

What we want to mean is that the returned rows are those that survived the filtering process, not that the selector will react to model changes.

@m4theushw setTimeout functionality is not ideal because the autoHeight property is still applied, meaning it will attempt to draw all of my rows first, then setState will be triggered for the autoHeight. I will try to provide an example of what I mean soon

[cherniavskii]

Hey @tielushko
Could you check out #9274? Is this what you are looking for?

[tielushko]

@cherniavskii, this would be a good place to start. It's exactly the concept I was looking for. However, it would be a very nice feature to add the dynamic data grid heights, besides just the numeric ones. For example for our use cases we use vh as the container height. I had a rough approximation formula to use with client height, vh value, and the row height in px from rowHeight prop to determine when to apply autoHeight.

I like the virtual scroller event subscription you used there, I think that's something I should have used in my case instead of hitting all the different methods for grouping, filtering, row expansion.

Overall, I think your example for autoHeight works really well.

[github-actions]

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

Note

We value your feedback @tielushko! How was your experience with our support team?
We'd love to hear your thoughts in this brief Support Satisfaction survey. Your insights help us improve!