MUI DataGrid列排序仅对当前页生效，如何实现全表排序？

问题核心是默认的DataGrid用的是客户端本地排序逻辑，只处理当前加载的页面数据。要实现全量分页数据排序，必须切换到服务器端模式（不管数据存在前端还是后端，都用这个模式手动处理全量数据的排序和分页）。

• 开启服务器端模式
  给DataGrid组件添加两个属性：paginationMode="server"和sortingMode="server"，告诉组件不要自动处理本地排序分页，把控制权交还给你。

• 监听排序、分页参数变化
  通过onSortModelChange获取当前的排序字段和方向（格式示例：[{ field: 'name', sort: 'asc' }]），通过onPaginationModelChange获取当前页码和每页条数（格式示例：{ page: 0, pageSize: 10 }）。

• 处理全量数据的排序和分页

  • 如果数据存在前端：拿到排序分页参数后，对全部原始数据做排序，再根据分页参数截取对应页面的数据，把结果传给DataGrid的rows属性。
  • 如果数据存在后端：把排序分页参数传给后端接口，让后端对全量数据做排序分页后返回结果，再更新DataGrid的rows。

前端全量数据处理示例代码 #

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

// 假设这是所有分页的完整数据
const fullData = [/* 你的全量业务数据 */];

export default function FullSortDataGrid() {
  const [filteredRows, setFilteredRows] = useState([]);
  const [sortModel, setSortModel] = useState([]);
  const [paginationModel, setPaginationModel] = useState({ page: 0, pageSize: 10 });

  useEffect(() => {
    let processedData = [...fullData];
    // 执行全量数据排序
    if (sortModel.length > 0) {
      const { field, sort } = sortModel[0];
      processedData.sort((a, b) => {
        if (sort === 'asc') {
          return a[field] > b[field] ? 1 : -1;
        }
        return a[field] < b[field] ? 1 : -1;
      });
    }
    // 截取当前页需要展示的数据
    const startIndex = paginationModel.page * paginationModel.pageSize;
    const endIndex = startIndex + paginationModel.pageSize;
    setFilteredRows(processedData.slice(startIndex, endIndex));
  }, [sortModel, paginationModel, fullData]);

  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGrid
        rows={filteredRows}
        columns={yourColumns} // 替换为你的列配置数组
        paginationMode="server"
        sortingMode="server"
        rowCount={fullData.length} // 全量数据总条数，用于分页器计算总页数
        onSortModelChange={setSortModel}
        onPaginationModelChange={setPaginationModel}
        pageSizeOptions={[10, 20, 50]}
      />
    </div>
  );
}

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