Material UI 的 Data Grid 组件提供了强大的数据表格功能，其中包括排序功能。这使得用户能够轻松对表格中的数据进行升序或降序排列。在本篇博客中，我们将深入探讨 Data Grid 中的排序功能，包括如何启用排序、处理排序事件以及自定义排序逻辑。每个部分将附带示例代码，以帮助你全面理解这些功能的实现。

1. 安装 MUI X Data Grid

确保你已经安装了必要的依赖包：

npm install @mui/material @emotion/react @emotion/styled @mui/x-data-grid

2. 基本使用

2.1 初始化 Data Grid

首先，让我们创建一个基础的 Data Grid，并启用排序功能。Data Grid 默认支持列排序，只需设置相应的列属性。

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

const columns = [
  { field: 'id', headerName: 'ID', width: 90 },
  { field: 'name', headerName: 'Name', width: 150, sortable: true },
  { field: 'age', headerName: 'Age', type: 'number', width: 110, sortable: true },
];

const rows = [
  { id: 1, name: 'John Doe', age: 35 },
  { id: 2, name: 'Jane Smith', age: 42 },
  { id: 3, name: 'Mike Johnson', age: 28 },
];

const SortingDataGrid = () => {
  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGrid rows={rows} columns={columns} pageSize={5} />
    </div>
  );
};

export default SortingDataGrid;

3. 启用排序

3.1 默认排序

在上面的示例中，sortable: true 属性已经启用了排序功能。用户可以通过点击列标题进行排序。

3.2 排序模式

可以使用 sortingOrder 属性自定义排序的顺序。支持的排序顺序为升序（asc）和降序（desc）。

const columns = [
  { field: 'id', headerName: 'ID', width: 90 },
  { field: 'name', headerName: 'Name', width: 150, sortable: true, sortingOrder: ['asc', 'desc'] },
  { field: 'age', headerName: 'Age', type: 'number', width: 110, sortable: true },
];

4. 处理排序事件

4.1 监听排序更改

可以使用 onSortModelChange 事件处理程序来监听排序的变化，并对数据进行更新或处理。

const SortingDataGrid = () => {
  const [sortModel, setSortModel] = React.useState([{ field: 'name', sort: 'asc' }]);

  const handleSortModelChange = (model) => {
    setSortModel(model);
  };

  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGrid
        rows={rows}
        columns={columns}
        pageSize={5}
        sortModel={sortModel}
        onSortModelChange={handleSortModelChange}
      />
    </div>
  );
};

5. 自定义排序逻辑

5.1 自定义排序函数

有时，你可能需要自定义排序逻辑。这可以通过 sortComparator 属性来实现。以下是一个例子，演示如何根据名字的长度进行排序。

const customSortComparator = (v1, v2) => {
  return v1.length - v2.length; // 按照字符串长度排序
};

const columns = [
  { field: 'id', headerName: 'ID', width: 90 },
  { field: 'name', headerName: 'Name', width: 150, sortable: true, sortComparator: customSortComparator },
  { field: 'age', headerName: 'Age', type: 'number', width: 110, sortable: true },
];

6. 排序和过滤结合使用

6.1 同时启用排序和过滤

Data Grid 允许同时启用排序和过滤功能。这是一个常见的需求，可以通过设置 filterable 属性来实现。

const columns = [
  { field: 'id', headerName: 'ID', width: 90 },
  { field: 'name', headerName: 'Name', width: 150, sortable: true, filterable: true },
  { field: 'age', headerName: 'Age', type: 'number', width: 110, sortable: true, filterable: true },
];

<DataGrid
  rows={rows}
  columns={columns}
  pageSize={5}
/>

7. 完整示例

以下是一个完整的示例，展示了所有上述功能，包括基本排序、自定义排序和同时启用排序与过滤。

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

const rows = [
  { id: 1, name: 'John Doe', age: 35 },
  { id: 2, name: 'Jane Smith', age: 42 },
  { id: 3, name: 'Mike Johnson', age: 28 },
  { id: 4, name: 'Alice Brown', age: 31 },
  { id: 5, name: 'Bob White', age: 27 },
];

const customSortComparator = (v1, v2) => {
  return v1.length - v2.length; // 按照字符串长度排序
};

const columns = [
  { field: 'id', headerName: 'ID', width: 90 },
  { field: 'name', headerName: 'Name', width: 150, sortable: true, filterable: true, sortComparator: customSortComparator },
  { field: 'age', headerName: 'Age', type: 'number', width: 110, sortable: true, filterable: true },
];

const SortingDataGrid = () => {
  const [sortModel, setSortModel] = React.useState([{ field: 'name', sort: 'asc' }]);

  const handleSortModelChange = (model) => {
    setSortModel(model);
  };

  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGrid
        rows={rows}
        columns={columns}
        pageSize={5}
        sortModel={sortModel}
        onSortModelChange={handleSortModelChange}
      />
    </div>
  );
};

export default SortingDataGrid;

8. 总结

Material UI 的 Data Grid 排序功能为用户提供了强大的数据管理工具。通过灵活的 API 和事件处理，可以实现复杂的排序逻辑与交互体验。在本篇博客中，我们探讨了基本的排序用法、自定义排序逻辑以及排序与过滤的结合使用。

希望通过以上的介绍和示例，你能够充分利用 Material UI Data Grid 的排序功能，实现出符合需求的表格展示。如果有任何问题或建议，欢迎在评论区留言！