html – Not all rows are displayed on Material-UI DataGrid.

I am working on a React project using Material UI and I am having a very troublesome issue with DataGrid component (version 4.0.0-alpha.23).

I have a data grid table inserted into the component of the box (set with its height). 70vh). Not all rows are displayed on a given page, and the number of rows changes as the window height changes. For example, there are 10 rows. When the page loads, the default row is 5 per page and the table displays 5 rows correctly on the first page (but the table height is large, so there is a “blank” content after the last row). If I convert pages per page to 10, only 8 rows will be shown, and there is no scroll bar to show the rest. If I minimize the browser window, the number of rows changes and the scroll bar appears, it is still impossible to see all the rows anyway. So the problem is not only the lack of scroll bar but also the fact that the actual number of rows per page does not match. pageSize The value of the parameter

I would like to point out that I have never used React and Material UI, and I am usually new to frontend development, so this might be a stupid problem with a simple solution. So, maybe forgive me for the stupid question. Anyway, I hope you can help me.

Here is a code example:

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

The grid class is as follows:

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' }
},

Write a Comment