React Material UI Data Grid onSelectionModelChange with custome pagination

Question

I am having a trouble using DataGrid onSelectionModelChange prop. I can get the current selected rows for a single page, but when I use custom pagination and move to the next page and use onSelectionModelChange again, I lose the previuos selections .

function DataTable(props, list, count) {

  const [page, setPage] = React.useState(1)
  const [selectionModel, setSelectionModel] = React.useState([]);
  const prevSelectionModel = React.useRef(selectionModel);


  let history = useHistory();
  const columns = [#cols here]

  React.useEffect(() => {

    listView(page, newSearch);
   
  }, [page, newSearch]);

  const data = {
    columns: columns,
    rows: JSON.parse(localStorage.getItem("results"))
  }

  return (
    <div style={{ height: 600, width: '100%' }}>
      <DataGrid
        autoHeight
        rows={data.rows}
        columns={columns}
        hideFooterPagination={true}
        checkboxSelection
        onSelectionModelChange={(ids) => {
          setSelectionModel(ids);
          console.log(selectionModel)
        }}
        pageSize={10}
        rowsPerPageOptions={[10]}
        // {...data}
      />
      <AppPagination
      setPage={setPage}
      page={page}
      />
    </div>
  );
}


enter code here

Answer 1

The props keepNonExistentRowsSelected works for your code. More information to see Mui data-grid docs and github issue

Answer 2

This is a working example for your case: you can watch the console in this sandbox... not losing selected rows

Live Demo

Answer 3

Use Props keepNonExistentRowsSelected in DataGrid. If keepNonExistentRowsSelected props is true, then the selection model will retain selected rows that do not exist. Useful when using server side pagination and row selections need to be retained when changing pages.

 <StyledDataGrid
          keepNonExistentRowsSelected/>.

Usage with server-side pagination