XGrid：如何让分页与筛选操作匹配，筛选时自动跳转至首页？

你当前使用的是XGrid的server端受控分页模式，该模式下所有分页、筛选、排序相关的状态同步都需要业务侧手动处理，组件本身不会在筛选条件变更时自动重置当前页码。
触发筛选时，你当前的页码仍然保留了跳转到高页码后的数值，当筛选后总数据量小于当前页面对应的起始偏移量时，就会出现页面无数据、渲染不稳定的问题：比如示例中跳转至第2页后当前page值为1（XGrid的页码默认从0开始计数），筛选后总数据10条，pageSize=50时最大合法页码为0，页码越界导致请求/渲染异常。

按以下步骤修改即可：

• 给XGrid添加onFilterModelChange事件监听，筛选条件变更时触发回调
• 回调内将当前page状态重置为0，同时携带新的筛选参数发起后端数据请求
• 额外增加边界兜底：每次拿到新的总数据量listTotal时，校验当前页码是否超出最大合法值，超出则自动重置为0

修改后的组件代码示例：

// TS项目可额外引入FilterModel类型做类型约束，JS项目可忽略
import { XGrid, FilterModel } from '@mui/x-data-grid-pro';

// 组件逻辑内新增筛选变更处理函数
const handleFilterChange = (newFilterModel: FilterModel) => {
  // 1. 重置页码为0（对应业务场景的第1页）
  setPage(0);
  // 2. 存储新的筛选参数，后续接口请求携带
  setFilterModel(newFilterModel);
  // 3. 携带重置后的页码、当前页长、新筛选参数发起后端表格数据请求
  fetchTableData(0, pageSize, newFilterModel);
}

// 兜底处理：每次总条数更新时校验页码合法性，避免极端场景越界
useEffect(() => {
  const maxPage = Math.ceil(listTotal / pageSize) - 1;
  if (page > maxPage && maxPage >= 0) {
    setPage(0);
    // 可选：主动触发一次数据请求避免页面空白
    fetchTableData(0, pageSize, filterModel);
  }
}, [listTotal, page, pageSize, filterModel]);

// XGrid组件新增筛选相关属性
<XGrid
    pageSize={pageSize}
    page={page}
    rowsPerPageOptions={[25, 50, 100]}
    rowCount={listTotal}
    onPageChange={onHandlePageChange}
    onPageSizeChange={onHandlePageSizeChange}
    rows={rows}
    columns={columns}
    paginationMode="server"
    pagination
    disableColumnResize={true}
    hideFooterSelectedRowCount={true}
    // 新增以下两个属性
    onFilterModelChange={handleFilterChange}
    filterModel={filterModel}
/>

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