跳到主要内容
+

数据表格 - 排序

基于一个或多个条件轻松对行进行排序。

默认情况下，数据表格用户已启用排序功能，无需任何显式配置即可直接使用。用户只需单击列标题即可设置排序规则。后续单击会更改列的排序方向。您可以在标题的箭头指示器上看到应用的方向。

单列排序和多列排序

多列排序

以下演示允许您同时根据多个条件对行进行排序。

按住 Ctrl 或 Shift 键（macOS 上使用 ⌘ Command 键）同时单击列标题。

将排序规则传递给数据表格

模型结构

排序模型是排序项的列表。每个项代表一个排序规则，由几个元素组成

  • sortingItem.field：规则应用的字段。
  • sortingItem.sort：排序方向（'asc'、'desc'、null 或 undefined）。如果为 null 或 undefined，则规则不适用。

初始化排序模型

默认情况下，用户已启用排序功能。但是，如果您要设置初始排序顺序，只需将模型提供给 initialState prop。

<DataGrid
  initialState={{
    sorting: {
      sortModel: [{ field: 'rating', sort: 'desc' }],
    },
  }}
/>

受控排序模型

使用 sortModel prop 来控制排序规则的状态。

您可以使用 onSortModelChange prop 来监听排序规则的变化并相应地更新 prop。

禁用排序

对所有列

默认情况下启用排序，但是您可以通过设置 disableColumnSorting prop 轻松禁用此功能。

<DataGrid disableColumnSorting />

对某些列

默认情况下，所有列都是可排序的。要禁用列的排序，请将 GridColDef 的 sortable 属性设置为 false。在以下演示中，用户无法从 UI 对*评分*列进行排序。

<DataGrid columns={[...columns, { field: 'rating', sortable: false }]} />

以编程方式对不可排序的列进行排序

colDef.sortable 设置为 false 的列无法从网格 UI 进行排序，但仍然可以通过编程方式进行排序。要向此类列添加排序规则，您可以初始化 sortModel，使用 sortModel prop，或使用 API 方法 sortColumn 或 setSortModel。

在以下演示中，firstName 列默认情况下无法通过网格 UI 进行排序，但它通过自定义构建的 UI 以编程方式进行排序。

排序时重置页码

默认情况下，排序不会更改当前页码。要在应用新排序时将用户返回到第一页，请使用 resetPageOnSortFilter prop。

自定义比较器

比较器决定了应如何对两个单元格值进行排序。

每种列类型都带有默认的比较器方法。您可以通过导入以下函数来重用它们

  • gridStringOrNumberComparator（由 string 和 singleSelect 列使用）
  • gridNumberComparator（由 number 和 boolean 列使用）
  • gridDateComparator（由 date 和 date-time 列使用）

要在特定列中扩展或修改此行为，您可以传入自定义比较器，并覆盖 GridColDef 接口的 sortComparator 属性。

从头开始创建比较器

在以下演示中，“创建于”列的排序基于 createdOn 字段的月份中的日期。这是一个完全自定义的排序比较器。

组合内置比较器

在以下演示中，“名称”列组合了 name 和 isAdmin 字段。排序首先基于 isAdmin，然后在必要时基于 name。它重用了内置的排序比较器。

非对称比较器

数据表格认为 sortComparator 函数是对称的，通过将其乘以 `-1` 自动反转降序排序的返回值。

虽然这对于大多数用例来说已经足够了，但是可以使用 getSortComparator 函数定义一个非对称比较器——它接收排序方向作为参数并返回一个比较器函数。

在下面的演示中，getSortComparator 函数用于“数量”列，以在应用排序时将 null 值保持在底部（无论排序方向如何）

自定义排序顺序

默认情况下，排序顺序在以下三种不同模式之间循环

const sortingOrder = ['asc', 'desc', null];

实际上，当您单击未排序的列时，它将按升序排序 (`asc`)。下一次单击将使其按降序排序 (`desc`)。再次单击将删除排序 (`null`)，恢复为数据提供的顺序。

对所有列

可以使用 sortingOrder prop 覆盖所有列的默认排序顺序。在以下演示中，列仅可按降序或升序排序。

每列

可以通过设置 GridColDef 接口的 sortingOrder 属性来配置（和覆盖）每列的排序顺序

const columns: GridColDef = [
  { field: 'rating', sortingOrder: ['desc', 'asc', null] },
];

服务器端排序

可以通过将 sortingMode prop 设置为 server 并实现 onSortModelChange 处理程序来在服务器端运行排序。

按 Enter 键开始编辑

apiRef

签名
applySorting: () => void
签名
getRowIdFromRowIndex: (index: number) => GridRowId
签名
getSortedRowIds: () => GridRowId[]
签名
getSortedRows: () => GridRowModel[]
签名
getSortModel: () => GridSortModel
签名
setSortModel: (model: GridSortModel) => void
签名
sortColumn: (field: GridColDef['field'], direction?: GridSortDirection, allowMultipleSorting?: boolean) => void

选择器

签名
gridSortModelSelector: (apiRef: GridApiRef) => GridSortModel
// or
gridSortModelSelector: (state: GridState, instanceId?: number) => GridSortModel
示例
gridSortModelSelector(apiRef)
// or
gridSortModelSelector(state, apiRef.current.instanceId)
签名
gridSortedRowEntriesSelector: (apiRef: GridApiRef) => GridRowEntry<GridValidRowModel>[]
// or
gridSortedRowEntriesSelector: (state: GridState, instanceId?: number) => GridRowEntry<GridValidRowModel>[]
示例
gridSortedRowEntriesSelector(apiRef)
// or
gridSortedRowEntriesSelector(state, apiRef.current.instanceId)
签名
gridSortedRowIdsSelector: (apiRef: GridApiRef) => GridRowId[]
// or
gridSortedRowIdsSelector: (state: GridState, instanceId?: number) => GridRowId[]
示例
gridSortedRowIdsSelector(apiRef)
// or
gridSortedRowIdsSelector(state, apiRef.current.instanceId)

有关选择器以及如何在专用页面上使用它们的更多信息

API