MUI X Data Grid响应式问题：分页行数选择器小屏幕不可见

问题描述 #

使用MUI X Data Grid时，开启分页功能后，屏幕尺寸缩小到一定程度，分页栏中的rowsPerPageOptions（行数选择器）会被自动隐藏，无法正常显示。

使用的组件代码如下：

<DataGrid
  getRowId={row => row.code}
  rows={allProducts}
  columns={columns}
  pageSize={pageSize}
  rowsPerPageOptions={[5, 10, 12]}
  onPageSizeChange={newPageSize => setPageSize(newPageSize)}
  checkboxSelection
  onSelectionModelChange={handleCheckboxClick}
  autoHeight
  experimentalFeatures={{ newEditingApi: true }}
  sx={{
    '& .hideRightSeparator > .MuiDataGrid-columnSeparator': {
      display: 'none'
    },
    'MuiDataGrid-columnHeader': { variant: 'body1' }
  }}
/>

问题现象：

解决方案 #

MUI X Data Grid默认分页栏会在小屏幕下隐藏非核心元素节省空间，可通过以下方法解决：

• 自定义分页组件
  替换默认分页栏，自主实现响应式布局，确保行数选择器始终可见：

  import { Box, Select, MenuItem, Typography } from '@mui/material';
  
  const CustomPagination = ({ page, pageSize, onPageChange, onPageSizeChange, rowsPerPageOptions, rowCount }) => {
    return (
      <Box sx={{ display: 'flex', flexWrap: 'wrap', justifyContent: 'space-between', alignItems: 'center', p: 1, gap: 1 }}>
        <Typography variant="body2">
          第 {page * pageSize + 1} - {Math.min((page + 1) * pageSize, rowCount)} 条，共 {rowCount} 条
        </Typography>
        <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
          <Typography variant="body2">每页：</Typography>
          <Select
            value={pageSize}
            onChange={(e) => onPageSizeChange(e.target.value)}
            size="small"
            sx={{ minWidth: 70 }}
          >
            {rowsPerPageOptions.map(opt => (
              <MenuItem key={opt} value={opt}>{opt}</MenuItem>
            ))}
          </Select>
        </Box>
      </Box>
    );
  };
  
  // 在DataGrid中引用自定义组件
  <DataGrid
    // 保留原有属性
    components={{ Footer: (props) => <CustomPagination {...props} /> }}
  />
  

• 覆盖默认样式强制显示
  通过sx属性修改默认样式，强制行数选择器在小屏幕下不被隐藏，并调整布局适配：

  <DataGrid
    // 原有属性不变
    sx={{
      '& .hideRightSeparator > .MuiDataGrid-columnSeparator': {
        display: 'none'
      },
      'MuiDataGrid-columnHeader': { variant: 'body1' },
      // 新增样式
      '& .MuiDataGrid-footerContainer': {
        flexWrap: 'wrap',
        padding: '8px',
        gap: '8px'
      },
      '& .MuiDataGrid-rowsPerPage': {
        display: 'flex !important',
        whiteSpace: 'nowrap'
      },
      '@media (max-width: 600px)': {
        '& .MuiDataGrid-pagination': {
          width: '100%',
          justifyContent: 'center'
        },
        '& .MuiDataGrid-rowsPerPage': {
          order: 1,
          width: '100%',
          justifyContent: 'center'
        }
      }
    }}
  />
  

• Pro版本调整响应式断点
  若使用DataGrid Pro，可通过paginationSettings直接控制行数选择器的显示规则：

  <DataGridPro
    // 原有属性不变
    paginationSettings={{
      rowsPerPageOptionsVisibility: 'always', // 始终显示行数选择器
      // 或自定义隐藏断点：仅当屏幕小于400px时才隐藏
      // rowsPerPageOptionsVisibilityMediaQuery: '(max-width: 400px)'
    }}
  />
  

内容的提问来源于stack exchange，提问作者Prathima