APIs not working after upgrade from DataGridPro to DataGridPremium

Question

I'm working in a project where initially we used MUI X DataGrid, but later shifted to DataGridPro due to the business logics. Recently, changed the plan (upgraded from Pro to Premium). After changing the plan there are some side effects. I've faced & facing some weird issues with existing codes. I'm using "@mui/x-data-grid-premium": "^6.0.2"

Following APIs (onPageChange, onPageSizeChange, rowsPerPageOptions) were working in the previous plan but not in current plan:

...
const [page, setPage] = useState(0);
const [pageSize, setPageSize] = useState(10);

const onPageChange = (changedPage) => {
    setPage(changedPage);
    handlePagination({ max: pageSize, offset: changedPage * pageSize });
};

const onPageSizeChange = (changedSize) => {
    setPageSize(changedSize);
    handlePagination({ max: changedSize, offset: page * changedSize });
};
...

<DataGridPremium
    ...
    experimentalFeatures={{ newEditingApi: true }}
    onPageChange={onPageChange}
    onPageSizeChange={onPageSizeChange}
    page={page}
    pageSize={pageSize}
    pagination
    paginationMode="server"
    rowsPerPageOptions={[10, 20, 30, 50, 100]}
/>

As you see from the above code that this is a server-side pagination with controlled state (pageSize & page). As i mentioned it was working code earlier but now not working (associated func not triggering). In addition, Rows per page dropdown shows [25, 50, 100] instead of [10, 20, 30, 50, 100]. You can have a look at the DataGridPremium API. APIs used as per documentation but not working.

---

Note: I've faced few days ago similar type API related issues for example row selection not working as expected but later fixed it as per below code:

// from this
onSelectionModelChange={(newSelectionModel) => handleSelections(newSelectionModel)}

// to this
onRowSelectionModelChange={(newSelectionModel) => handleSelections(newSelectionModel)}

---

Now coming back to my current problems with the APIs, how can i fix it? Is there anything i missed or need to do? Or it's bug from MUI X DataGridPremium end?

Answer 1

The APIs were not working/broken due to version mismatch. Previous APIs are for older version (v5). In my case, as the plan is upgraded & installed the latest version (v6.0.2) so the APIs should be used the newer ones (as per documentation, although the documentation illustrates that the newer APIs are for the version v6.0.3). Anyway, below are the changes need to be done to be working 💯

...
const [paginationModel, setPaginationModel] = useState({
    page: 0,
    pageSize: 10,
  });

useEffect(() => {
    const { page, pageSize } = paginationModel;
    handlePagination({ max: pageSize, offset: page * pageSize });
  }, [paginationModel]);
...

<DataGridPremium
    ...
    pageSizeOptions={[10, 20, 30, 50, 100]}
    paginationModel={paginationModel}
    onPaginationModelChange={setPaginationModel}
/>