如何在MUI X Data Grid排序时重置分页？

要实现排序操作时重置分页，你需要通过状态管理分页页码，并在排序模型变化时将页码重置为初始值，具体实现如下：

1. 使用React的useState钩子管理分页页码状态
2. 将页码状态和页码变更回调绑定到DataGrid组件的page和onPageChange属性
3. 在onSortModelChange回调中重置页码为初始值

修改后的完整代码：

import * as React from 'react';
import { DataGrid } from '@mui/x-data-grid';

const Table: React.FC<Readonly<{}>> = () => {
  // DataGrid的page默认从0开始计数，初始化页码为0
  const [page, setPage] = React.useState(0);

  return (
    <div>
      <DataGrid
        page={page}
        onPageChange={(newPage) => setPage(newPage)}
        onSortModelChange={() => {
          // 触发排序时重置页码到第一页
          setPage(0);
        }}
      />
    </div>
  );
};

export default Table;

如果你的业务场景采用1-based的页码计数（即第一页为1），只需调整状态初始值和重置值，并适配DataGrid的属性：

const [pageNum, setPageNum] = React.useState(1);

// ...

<DataGrid
  page={pageNum - 1} // 转换为DataGrid需要的0-based索引
  onPageChange={(newPage) => setPageNum(newPage + 1)}
  onSortModelChange={() => {
    setPageNum(1);
  }}
/>

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