[question] Handling selection model with server side data

[matandro]

The problem in depth 🔍

This is a discussion / question and not a bug.

We are looking into converting a few of our view to use server-side data loading. One of the issues we are facing is in handling of selection, specifically the "select all" option.

An example to one such view for us has around 200k rows with a lot of associated data. Loading time for the table is around 25 seconds. From this page the user can select a set of rows and move to perform an action on them. The way they do so is by filtering based on multiple columns and pressing select all until they get the proper set they want. The final selection can be anywhere between 1 to 5k rows with ~150 being the average. Note that they sometimes filter -> select all -> set new filter -> select all -> ... until the get the correct set.

With frontend data, by pressing select all the selection model receives all of the ID's of the currently unfiltered set. We are trying to figure out the best way to transfer the same behavior for server side data loading or we need to re-think the UX from scratch.

What are the different approaches you suggest?

Your environment 🌎

`npx @mui/envinfo`

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

Search keywords: datagrid server-side selection
Order ID: 30001523

[michelengelen]

Hey @matandro and thanks for raising this discussion.
It certainly is an interesting implementation. Would it be possible for you to provide us with a (minimal) demo on codesandbox so we can understand the problem you are facing in more detail?

From what I got reading your explanation:

1. you have a big dataset of 200K+ rows (in certain views)
2. your users want to select all rows from a filtered set of rows

Now for the feature you are trying to build.

When filtering the row and clicking "Select all" the onRowModelChange prop will get called with the ids of the currently filtered rows.

If you want to filter again you would either need to reselect all rows, or use the apiRef to update the selection. You can unselect the current selection in the onFilterModelChange callback.

I have build a small demo with what I think you are trying to build: Filtering and selecting

⚠️ The sandbox is super slow, so i trimmed down my example to use only 1K rows. It works very well on my local instance! 💪🏼

Let me know if this is what you are looking for, or you need anything else from me.

[github-actions]

The issue has been inactive for 7 days and has been automatically closed. If you think that it has been incorrectly closed, please reopen it and provide missing information (if any) or continue the last discussion.

[matandro]

Hey @michelengelen,

Thanks for the demo. My question is more for the server side data mode. With the data in frontend, there is no issue. The default behavior already gives you the select / unselect based on filtering.

The question is how would you handle it when the data in server side, i.e. you don't have all the rows loaded to the table.

[michelengelen]

Hey @matandro ... In this case I would like to ask @MBilalShafi about this specific topic. He has delved into this topic lately and probably has the most knowledge about it atm.

@MBilalShafi could you have a look please? Thanks! 🙇🏼

[MBilalShafi]

@matandro Could you confirm what is the structure of your data? I assume you are using the plain lazy-loading feature to load data from the server.
Row selection (especially select all) and filtering, sorting, etc. have partial support but need some aspects to be fixed. As far as I know, the use case you mentioned is not possible atm.

We are working on more advanced server-side support with the data grid to address issues like this and many more issues related to server-side data fetching. You can learn more about the concept in this documentation section.

Let me know if you still have some confusion or if I understood your concern incorrectly.

[github-actions]

The issue has been inactive for 7 days and has been automatically closed. If you think that it has been incorrectly closed, please reopen it and provide missing information (if any) or continue the last discussion.