react-table v7.8.0多列排序异常：仅date列生效问题排查

问题描述 #

使用react-table v7.8.0创建4列表格，期望实现date和views列的多列排序，但目前仅date列排序生效，分页和手动排序功能正常，已参照官方文档配置但问题未解决。

核心原因 #

你在Table组件的initialState中设置了manualSortBy: true，这会让react-table放弃自动处理排序逻辑，转而由开发者手动根据sortBy状态实现排序逻辑。但当前代码中并未实现手动模式下的多列排序逻辑，仅依赖初始sortBy配置，导致后续多列排序操作无法生效。

同时，date列使用了格式化后的字符串作为排序依据，字符串排序会导致日期排序逻辑错误，需要改用原始日期对象进行排序。

修复步骤 #

1. 调整数据结构，保留原始日期对象 #

修改ViewsPageDayTable.js中处理date字段的逻辑，新增rawDate字段存储原始日期对象，用于排序：

// 在处理date的分支中添加
if (j === "date") {
  var date = new Date(data[i][j])
  dataRow["date"] = date.toLocaleDateString(siteMetadata.locale, postDateTemplate)
  dataRow["rawDate"] = date; // 新增原始日期对象，用于排序计算
}

2. 更新列配置，使用原始日期排序 #

修改ViewsPageDayTable.js中的columns配置，让date列使用rawDate作为排序依据，同时保持渲染格式化后的日期：

{
  Header: "Date",
  accessor: "rawDate", // 指向原始日期对象
  Cell: ({ value }) => value.toLocaleDateString(siteMetadata.locale, postDateTemplate), // 渲染格式化后的日期
  sortType: (a, b) => {
    return new Date(b) - new Date(a)
  },
},

3. 实现手动多列排序逻辑 #

修改Table.js，添加手动排序逻辑，根据sortBy状态对数据进行多列排序：

// 在Table组件中，先获取sortBy状态
const {
  getTableProps,
  getTableBodyProps,
  headerGroups,
  page,
  prepareRow,
  setFilter,
  canPreviousPage,
  canNextPage,
  pageOptions,
  nextPage,
  previousPage,
  state: { pageIndex, pageSize, sortBy }, // 新增sortBy
} = useTable(...)

// 手动根据sortBy数组中的规则排序数据
const sortedData = useMemo(() => {
  let sorted = [...data];
  // 按排序规则依次处理每一列
  sortBy.forEach((sortRule) => {
    sorted.sort((rowA, rowB) => {
      const column = columns.find(col => col.accessor === sortRule.id);
      if (!column) return 0;

      // 处理自定义sortType或基础排序
      if (column.sortType && column.sortType !== 'basic') {
        const sortResult = column.sortType(rowA[sortRule.id], rowB[sortRule.id]);
        return sortRule.desc ? -sortResult : sortResult;
      } else {
        // 基础排序逻辑
        if (rowA[sortRule.id] < rowB[sortRule.id]) return sortRule.desc ? 1 : -1;
        if (rowA[sortRule.id] > rowB[sortRule.id]) return sortRule.desc ? -1 : 1;
        return 0;
      }
    });
  });
  return sorted;
}, [data, columns, sortBy]);

4. 更新useTable配置，传入排序后的数据 #

修改Table.js中useTable的参数，将data替换为sortedData，并更新初始sortBy的id为rawDate：

useTable(
  {
    columns,
    data: sortedData, // 传入手动排序后的数据
    initialState: {
      defaultCanSort: true,
      disableSortBy: false,
      manualSortBy: true,
      sortBy: useMemo(
        () => [
          {
            id: "rawDate", // 对应date列的accessor
            desc: false,
          },
          {
            id: "views",
            desc: true,
          },
        ],
        []
      ),
      pageIndex: 0,
      pageSize: 15,
      manualPagination: true,
    },
  },
  useFilters,
  useSortBy,
  usePagination
)

多列排序操作说明 #

react-table默认支持按住Shift键点击表头，添加多列排序规则，点击已排序的表头可切换升降序。

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