如何基于选中行对React MUI DataTable/Datagrid进行排序？

问题根源 #

MUI X DataGrid（或你封装的DataTable）本身没有SortCheckedAtTop这个内置属性，直接传递该属性不会触发任何排序逻辑，需要手动实现基于选中状态的排序规则。

方案一：预处理数据源（简单直接） #

在将用户数据传给DataTable之前，直接对数组进行排序，把选中的用户移到顶部，未选中的用户保持原有排序（或追加自定义排序）：

import * as React from 'react';
import DataTable from '../../components/DataTable/DataTable'
import { useRemember } from '@inertiajs/inertia-react'

const List = ({users, visibleColumns, columns, pageSizes, }) => {
  const [importedUsers, setimportedUsers] = useRemember(null, 'Users/Import')
  // 把选中的用户ID存到Set里，提升查找效率
  const selectedUserIds = new Set(importedUsers?.map(item => item.id) || [])

  // 预处理数据：选中用户排顶部，未选中用户按created_at降序排列
  const sortedUsers = [...users].sort((userA, userB) => {
    const aIsSelected = selectedUserIds.has(userA.id)
    const bIsSelected = selectedUserIds.has(userB.id)

    // 选中状态优先级最高：选中的排前面
    if (aIsSelected && !bIsSelected) return -1
    if (!aIsSelected && bIsSelected) return 1

    // 选中状态相同时，按created_at降序排序
    return new Date(userB.created_at) - new Date(userA.created_at)
  })

  return (
    <div>
      <DataTable
        data={sortedUsers}
        columns={columns}
        visibleColumns={visibleColumns}
        rowSelectionModel={importedUsers?.map(item => item.id)}
      />
    </div>
  )
}
export default List

方案二：结合DataGrid受控排序（支持表头排序交互） #

如果需要保留DataGrid的表头排序功能，同时让选中行始终置顶，可以通过自定义排序比较器实现：

import * as React from 'react';
import DataTable from '../../components/DataTable/DataTable'
import { useRemember } from '@inertiajs/inertia-react'

const List = ({users, visibleColumns, columns, pageSizes, }) => {
  const [importedUsers, setimportedUsers] = useRemember(null, 'Users/Import')
  const selectedUserIds = new Set(importedUsers?.map(item => item.id) || [])
  // 控制排序模型，默认按created_at降序
  const [sortModel, setSortModel] = React.useState([{ field: 'created_at', sort: 'desc' }])

  // 自定义排序比较器：先判断选中状态，再按当前排序字段处理
  const customSortComparator = (userA, userB, column) => {
    const aIsSelected = selectedUserIds.has(userA.id)
    const bIsSelected = selectedUserIds.has(userB.id)

    // 选中行置顶逻辑
    if (aIsSelected && !bIsSelected) return -1
    if (!aIsSelected && bIsSelected) return 1

    // 选中状态相同时，按当前排序字段处理
    if (column.field === 'created_at') {
      return sortModel[0].sort === 'desc' 
        ? new Date(userB.created_at) - new Date(userA.created_at)
        : new Date(userA.created_at) - new Date(userB.created_at)
    }

    // 其他字段的默认排序逻辑（可根据需求调整）
    const valueA = userA[column.field]
    const valueB = userB[column.field]
    return sortModel[0].sort === 'desc' 
      ? valueB > valueA ? 1 : -1
      : valueA > valueB ? 1 : -1
  }

  return (
    <div>
      <DataTable
        data={users}
        columns={columns}
        visibleColumns={visibleColumns}
        rowSelectionModel={importedUsers?.map(item => item.id)}
        // 传递受控排序相关props给底层DataGrid
        sortModel={sortModel}
        onSortModelChange={setSortModel}
        sortingComparator={customSortComparator}
      />
    </div>
  )
}
export default List

注意：如果你的DataTable是封装的自定义组件，需要确保它将sortModel、onSortModelChange、sortingComparator这些props透传给底层的MUI DataGrid组件，否则受控排序逻辑无法生效。

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