MUI DataGrid pageSizeOptions stuck on default

Question

I can't seem to get pagesize options working for MUI DataGrid. I have implemented it as below:

<div style={{ display: "flex", height: "100%" }}>
      <div style={{ flexGrow: 1 }}>
        <DataGrid
          autoHeight
          rows={users}
          columns={columns}
          paginationModel={paginationModel}
          onPaginationModelChange={setPaginationModel}
          pageSizeOptions={[paginationModel.pageSize]}
          rowCount={rowCountState}
          paginationMode="server"
          sortingMode="server"
          onSortModelChange={handleSortModelChange}
          loading={isLoading}
        />
      </div>
    </div>

With the following variables/functions:

const [users, setUsers] = useState([]);
const columns = [
  { field: "email", headerName: "Email", flex: 1 },
  { field: "roles", headerName: "Roles", flex: 1, sortable: false },
];
const [paginationModel, setPaginationModel] = React.useState({
  pageSize: 25,
  page: 0,
});
const [rowCount, setRowCount] = React.useState(0);
const [rowCountState, setRowCountState] = React.useState(rowCount);
const [isLoading, setIsLoading] = React.useState(false);
const [sortOrder, setSortOrder] = useState("asc");

const handleSortModelChange = useCallback((sortModel) => {
  setSortOrder(sortModel[0].sort);
}, []);

useEffect(() => {
  setRowCountState((prevRowCountState) =>
    rowCount !== undefined ? rowCount : prevRowCountState
  );
}, [rowCount, setRowCountState]);

The problem is the pageSizeOptions don't change from the default 25,50,100. I want only the option for 25 to be visible. Any help would be appreaciated.

Answer 1

Turns out

npm install @mui/x-data-grid

Wasn't automatically installing the latest version of DataGrid. I specified latet version with

npm install @mui/[email protected]

And it started working.