[data grid] Row selection & Server Side Pagination | How to change default behaviour

[mike-paretos]

The problem in depth

I have a couple of questions on Row selection feature and Server Side pagination.

1. We have use-case where the default state of row selection is 'selected all'. Is it possible to have all checkboxes, to be selected by default without providing the whole list of row_ids? In our case, it's more than 3000000 rows.

2. Is it possible to change the behavior of the header 'Select/unselect all' checkbox to reflect the whole table, not single page? In the example https://v6.mui.com/x/react-data-grid/row-selection/#usage-with-server-side-pagination it is reflected per page.

Your environment

`npx @mui/envinfo`

``` "@mui/icons-material": "^5.14.0", "@mui/lab": "^5.0.0-alpha.136", "@mui/material": "^5.14.0", "@mui/utils": "^5.15.14", "@mui/x-data-grid-premium": "^6.18.7", "@mui/x-date-pickers": "^7.0.0", "@mui/x-date-pickers-pro": "^7.0.0", "@mui/x-license-pro": "^6.10.2", ```

Search keywords: row selection, defaul checkbox state, default row selection Order ID: 82474

[cherniavskii]

Hi @mike-paretos

1. We have use-case where the default state of row selection is 'selected all'. Is it possible to have all checkboxes, to be selected by default without providing the whole list of row_ids? In our case, it's more than 3000000 rows.

Indeed, rowSelectionModel expects to contain ids of the selected rows. Currently, there's no way to overcome this. We can potentially do something like this:

// Row is unselected by default unless its id is in the `rowSelectionModel`
<DataGrid
  rowSelectionModel={[1]} // Only row `1` is selected
  rowSelectionDefaultValue="unselected" // default behavior
/>

// Row is selected by default unless its id is in the `rowSelectionModel`
<DataGrid
  rowSelectionModel={[1]} // All rows except `1` are selected
  rowSelectionDefaultValue="selected"
/>

That would solve the initial selection problem, but what if the user then unselects all rows? We either have to pass all row ids to the rowSelectionModel, or switch to rowSelectionDefaultValue="unselected". How would the data grid know when to flip the rowSelectionDefaultValue value? 🤔

2. Is it possible to change the behavior of the header 'Select/unselect all' checkbox to reflect the whole table, not single page? In the example v6.mui.com/x/react-data-grid/row-selection/#usage-with-server-side-pagination it is reflected per page.

Since the data grid selects the rows by ids, it cannot select the rows that were not fetched yet. This is somewhat connected with the previous point, but I need more details about your use case.

• Why are all the rows selected by default?
• How are you going to use the rows selection?

Thanks!

[mike-paretos]

Thanks @cherniavskii for looking into this!

I would add rowSelectionMode with the type include or exclude.

In the include mode, selection works the way it is implemented right now.

In the exclude mode, behaviour is reversed.

For the select all / unselect all, I would rather have special field or change rowSelectionModel, to be of type number[] | 'none' | 'all' and a special type of event callback or event details for the existing one.

Why are all the rows selected by default?

Consider a use-case, with some KPI/Number/Chart over the table. By default, all values from the table are included into the calculation, once you unselect the row, it is excluded from the calculation.

[michelengelen]

tbh I would consider changing the logic from "use the data from the selected rows" to "exclude the data from selected rows" Would that be an option? Or is your selection model tied to some other logic that would make this approach unreasonable?

[mike-paretos]

For the large dataset, it would still make sense to have a special flag for 'unselect/select all'. Passing huge amount of IDs (3mil?) would require a lot of bandwidth.

Here the example how it is done in another solution - https://ag-grid.com/react-data-grid/server-side-model-selection/#api-selection

[michelengelen]

Interesting ... I will add this to the board. 👍🏼