Not all rows are shown on Material-UI DataGrid

Question

I'm working on a React project using Material UI and I'm facing quite an annoying problem with the DataGrid component (version 4.0.0-alpha.23).

I have a DataGrid table inserted into a Box component (set with an height of 70vh). Not all rows are shown on a given page, and the number of rows rendered changes as window's height changes. E.g., there are 10 rows. On page loading, default rows-per-page is 5 and the table correctly shows 5 rows on the first page (but table's height is bigger, so there is a trailing "blank" content after the last row). If I change the rows-per-page to 10, only 8 rows are shown, and there is no scroll bar to show the remaining ones. If I make the browser window smaller, the number of rows shown changes and a scroll bar appears, anyway it is still impossible to see all the rows. So the problem is not just the lack of a scroll bar but also the fact that the actual number of rows shown per page doesn't coincide with the pageSize parameter value.

I'd like to point out that I have never used React nor Material UI, and I'm new to frontend developing in general, so maybe this is a stupid problem with a straightforward solution, so forgive me for the probably silly question. Anyway, I hope you could help me.

Here's a code example:

<Box className={classes.grid}>
  <DataGrid
  rows={rows}
  columns={columns}
  pageSize={5}
  rowsPerPageOptions={[5, 10, 15]}
  headerHeight={42}
  />
</Box>

grid class is like below:

grid: {
  padding: theme.spacing(0, 0, 2),
  width: '100%',
  height: '70vh',
  '& .MuiDataGrid-columnsContainer': { backgroundColor: '#000', color: '#fff' },
  '& .MuiDataGrid-row': {
    '&:nth-of-type(odd)': {
      backgroundColor: theme.palette.action.hover,
    },
  },
  '& .MuiDataGrid-columnSeparator': { display: 'none' },
  '& .MuiIconButton-root': { color: '#fff !important' },
  '& .MuiTablePagination-actions > .MuiIconButton-root': { color: '#000 !important' },
  '& .MuiDataGrid-root .MuiDataGrid-menuIcon': { visibility: "visible" },
  '& .MuiDataGrid-row': { maxHeight: "none !important", },
  '& .MuiDataGrid-root .MuiDataGrid-cellWithRenderer[data-field="ItemsId"]': { lineHeight: '20px !important' },
  '& .MuiDataGrid-cell.MuiDataGrid-cellWithRenderer.MuiDataGrid-cellLeft': { maxHeight: 
  "none !important" },
  '& .MuiDataGrid-cell.MuiDataGrid-cellLeft': { maxHeight: 'none !important', display: 
  'flex', alignItems: 'center' }
},

Answer 1

according to MUI documentation, the autoPageSize prop should be used to scale the number of rows (aka pageSize) to the height of the grid container. therefore, i assume, using the pageSize and rowsPerPageOptions props is incompatible with using autoPageSize. you will either want to display a specific number of rows per page using pageSize, or display the number of rows that fits your grid's styles (i.e., height: 70vh;) with autoPageSize.