使用react-table如何实现匹配当前日期的表格行置顶展示？

核心逻辑是自定义日期列的排序规则，给当日日期的条目更高的排序优先级，其余条目保留原有时间正序逻辑即可。

1. 先获取格式化后的当前日期 #

提前将当前日期转换为和表格字段一致的mm/dd/yyyy格式，方便后续匹配：

const getFormattedToday = () => {
  const now = new Date()
  const month = String(now.getMonth() + 1).padStart(2, '0')
  const day = String(now.getDate()).padStart(2, '0')
  const year = now.getFullYear()
  return `${month}/${day}/${year}`
}
const TODAY = getFormattedToday()

2. 给日期列配置自定义排序规则 #

找到你表格列配置中对应Date of Operation的列，新增/替换sortType属性：

const columns = [
  // 其余列配置保持不变
  {
    Header: 'Date of Operation',
    accessor: 'operationDate', // 替换为你实际的字段名
    sortType: (rowA, rowB) => {
      const dateA = rowA.values.operationDate
      const dateB = rowB.values.operationDate

      const isADay = dateA === TODAY
      const isBDay = dateB === TODAY

      // 当日条目永远排在非当日条目前面
      if (isADay && !isBDay) return -1
      if (!isADay && isBDay) return 1

      // 同为当日/同为非当日，按原有时间正序排列
      return new Date(dateA) - new Date(dateB)
    }
  }
]

3. 保持原有排序配置不变 #

原来设置的默认按该列正序排列的配置不需要修改，自定义排序规则会自动生效。

注意事项 #

如果你的日期字段存在时区偏差问题，可以将日期统一转换为时间戳后再判断是否属于同一天，核心排序逻辑不需要改动。

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