Primereact DataTable日期按字符串排序：如何强制按Date类型排序

我的数据中的日期字段被PrimeReact DataTable当作字符串处理，我通过格式化函数将日期字符串转换为Date类型后，组件仍按字符串规则排序。请问如何强制让其按日期类型进行排序？

相关代码示例：

const products = [
    {
      id: 1,
      name: "Apple Watch",
      price: "₦350,000",
      category: "Accessories",
      quantity: "7",
      rating: "5",
      busdate: "12/31/2022",
      millisec: 1672470000000,
    },
    {
      id: 2,
      name: "Fitness watch",
      price: "₦10,000",
      category: "Fitness",
      quantity: "23",
      rating: "2",
      busdate: "12/30/2022",
      millisec: 1672383600000,
    }];

// 格式化数据，将日期转为Date类型
const formatReport = products.map(item => {
  return {
    ...item,
    BusDate: new Date(item.busdate)
  }
})

<DataTable
  value={formatReport}
/>

1. 确保列绑定的是Date类型字段 #

你已经将日期转为BusDate（Date对象），但需要在Column组件中明确指定field为这个Date类型字段，而不是原来的字符串类型busdate：

<DataTable value={formatReport} sortMode="single">
  {/* 绑定Date类型的BusDate字段 */}
  <Column field="BusDate" header="业务日期" sortable />
  {/* 其他列配置 */}
  <Column field="name" header="产品名称" sortable />
  <Column field="price" header="价格" />
</DataTable>

2. 自定义日期排序函数（可选） #

如果组件仍未正确识别类型，可以为对应列指定自定义排序函数，直接基于Date对象的时间戳进行比较：

// 自定义日期排序逻辑
const dateSort = (val1, val2) => {
  return val1.getTime() - val2.getTime();
};

// 在列中配置排序函数
<Column 
  field="BusDate" 
  header="业务日期" 
  sortable 
  sortFunction={dateSort} 
/>

原理说明 #

PrimeReact DataTable默认会根据字段的实际类型或渲染内容推断排序规则，但如果列绑定的还是原字符串字段，或者类型推断异常，就会按字符串排序。通过明确绑定Date类型字段，或者自定义排序函数强制基于日期时间戳比较，就能实现正确的日期排序逻辑。

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