MUI X Data Grid筛选后分页不同步问题求助

当对DataGrid列执行筛选后仅返回1条数据，但分页组件仍渲染全部页码且允许切换至下一页，这是因为默认情况下DataGrid的分页逻辑基于原始数据总量，而非筛选后的实际数据量。以下是解决这个问题的具体方案：

核心思路 #

通过监听筛选状态变化，获取筛选后的实际数据条数，以此动态控制分页组件的显示与禁用。

具体实现 #

1. 实时获取筛选后的数据量 #

利用DataGrid的API获取筛选后的数据集，监听筛选模型的变化来更新数据量：

import { DataGrid, useGridApiContext } from '@mui/x-data-grid';
import { useEffect, useState } from 'react';

// 假设你的原始数据为rows，列配置为columns
export default function YourGridComponent() {
  const [filteredRowCount, setFilteredRowCount] = useState(rows.length);
  const apiRef = useGridApiContext();

  useEffect(() => {
    // 获取筛选后的所有行
    const filteredRows = apiRef.current.getFilteredRows();
    setFilteredRowCount(filteredRows.length);
  }, [apiRef]);

  // 其他组件逻辑...
}

2. 动态控制分页状态 #

根据筛选后的行数，控制分页组件的可用性或显示：

• 方法一：直接禁用分页（当数据不足一页时）

<DataGrid
  rows={rows}
  columns={columns}
  pageSize={5}
  rowsPerPageOptions={[5]}
  // 当筛选后数据量小于等于单页容量时，禁用分页
  pagination={filteredRowCount > 5}
/>

• 方法二：自定义分页组件，数据不足时隐藏分页

import { GridPagination } from '@mui/x-data-grid';

const CustomPagination = () => {
  const apiRef = useGridApiContext();
  const filteredRows = apiRef.current.getFilteredRows();
  const pageSize = apiRef.current.getPageSize();

  // 数据不足一页时不渲染分页组件
  if (filteredRows.length <= pageSize) {
    return null;
  }

  return <GridPagination />;
};

// 在DataGrid中使用自定义分页组件
<DataGrid
  rows={rows}
  columns={columns}
  pageSize={5}
  rowsPerPageOptions={[5]}
  components={{ Pagination: CustomPagination }}
/>

3. 阻止无效的分页切换（可选） #

如果需要保留分页组件但禁止无效切换，可以监听分页变化事件：

<DataGrid
  // 其他属性...
  onPageChange={(params) => {
    const maxValidPage = Math.ceil(filteredRowCount / params.pageSize) - 1;
    // 如果切换到的页码超出有效范围，阻止操作
    if (params.page > maxValidPage) {
      apiRef.current.setPage(maxValidPage);
    }
  }}
/>

原理说明 #

MUI DataGrid默认使用rowCount属性（未设置时取原始数据长度）来计算分页逻辑，而筛选后的实际数据量需要通过getFilteredRows()API主动获取。通过同步这个值，就能让分页组件根据真实数据量调整状态，符合预期行为。

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