如何让React Admin自定义FileNumberField支持列表排序？

要让你的自定义字段支持排序，需要补充两部分配置：组件内部的表头排序逻辑，以及使用时指定正确的属性。

1. 修改自定义字段组件，添加表头排序交互 #

更新你的FileNumberField代码，加入排序按钮的渲染逻辑：

import { Typography } from '@mui/material'
import { 
  PublicFieldProps, 
  sanitizeFieldRestProps, 
  useRecordContext,
  useListContext,
  SortButton
} from 'react-admin'
import Files from 'types/Files'
import { formatFileNumber } from 'utils/client'

interface FileNumberFieldProps extends PublicFieldProps {}

const FileNumberField = (props: FileNumberFieldProps) => {
  const { source, sortable = false, label, isHeader, ...rest } = props
  const record = useRecordContext<Files>()
  const { setSort, sort } = useListContext()

  // 渲染表头：带排序按钮的标题
  if (isHeader) {
    return (
      <SortButton
        active={sort.field === source}
        direction={sort.order}
        onClick={() => {
          const newOrder = sort.field === source 
            ? (sort.order === 'ASC' ? 'DESC' : 'ASC') 
            : 'ASC'
          setSort(source, newOrder)
        }}
        disabled={!sortable}
      >
        {label}
      </SortButton>
    )
  }

  // 渲染单元格内容：原有的逻辑
  return (
    <Typography component="span" variant="body2" {...sanitizeFieldRestProps(rest)}>
      {record?.FileNumber ? formatFileNumber(record.FileNumber) : ''}
    </Typography>
  )
}

FileNumberField.displayName = 'FileNumberField'

export default FileNumberField

2. 使用字段时指定必填属性 #

在List的Datagrid中使用字段时，必须添加source属性（对应后端用于排序的字段名，这里是FileNumber）：

<FileNumberField label="File-Nr." source="FileNumber" sortable={true} />

关键说明 #

• isHeader：react-admin的Datagrid会自动给列组件传递这个属性，用来区分渲染表头还是单元格内容
• SortButton：react-admin提供的内置组件，自带排序状态样式（升序/降序箭头）和点击交互
• useListContext：获取当前List的排序状态和排序方法setSort，用来触发排序动作
• source：必须指定，告诉react-admin按哪个后端字段进行排序

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