并非所有行都显示在 Material-UI DataGrid 上

Question

我正在使用 Material UI 开发一个 React 项目，我在使用 DataGrid 组件（版本 4.0.0-alpha.23）时遇到了一个非常烦人的问题。

我将 DataGrid table 插入到 Box 组件中（高度设置为 70vh）。并非所有行都显示在给定页面上，呈现的行数随着 window 的高度变化而变化。例如，有 10 行。在页面加载时，默认每页行数为 5，table 在第一页正确显示 5 行（但 table 的高度更大，因此后面有一个尾随的“空白”内容最后一行）。如果我将每页行数更改为 10，则只显示 8 行，并且没有滚动条显示其余行。如果我把浏览器window变小，显示的行数就变了，出现滚动条，反正还是看不到所有的行。所以问题不仅在于缺少滚动条，还在于每页显示的实际行数与 pageSize 参数值不一致。

我想指出，我从未使用过 React，也从未使用过 Material UI，而且我对一般的前端开发是新手，所以这可能是一个愚蠢的问题直接的解决方案，所以请原谅我这个可能很愚蠢的问题。无论如何，我希望你能帮助我。

这是一个代码示例：

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

网格class如下：

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

根据 MUI documentation，应该使用 autoPageSize 属性将行数（又名 pageSize）缩放到网格容器的高度。因此，我假设使用 pageSize 和 rowsPerPageOptions 道具与使用 autoPageSize 不兼容。您要么希望使用 pageSize 在每页显示特定行数，要么使用 autoPageSize.[=19 显示适合您的网格样式（即 height: 70vh;）的行数=]

并非所有行都显示在 Material-UI DataGrid 上

Not all rows are shown on Material-UI DataGrid

html

css

reactjs

datagrid

material-ui