修改TanStack Table ver8排序逻辑：移除无排序状态

一、修改排序循环逻辑（取消无排序状态） #

TanStack Table 默认的排序切换是「无排序→asc→desc→无排序」循环，要改成「asc→desc→asc」循环，你需要自定义排序切换逻辑，替换默认的getToggleSortingHandler()：

1. 定义自定义排序切换函数：

const handleSortToggle = (column) => {
  setSorting(prevSorting => {
    // 定位当前列的排序状态
    const currentSort = prevSorting.find(sort => sort.id === column.id);
    
    let newDirection;
    if (!currentSort) {
      // 当前列未排序，切换为asc
      newDirection = 'asc';
    } else if (currentSort.direction === 'asc') {
      // 当前是asc，切换为desc
      newDirection = 'desc';
    } else {
      // 当前是desc，切换回asc
      newDirection = 'asc';
    }
    
    // 单排序模式：只保留当前列的排序规则
    return [{ id: column.id, direction: newDirection }];
  });
};

2. 修改表头的点击事件，替换默认的handler：

// 原代码中的onClick部分替换为自定义函数
<div
  {...{
    className: header.column.getCanSort()
      ? "cursor-pointer select-none"
      : "",
    onClick: () => handleSortToggle(header.column), // 此处替换为自定义函数
  }}
>
  {/* 其余渲染内容保持不变 */}
</div>

修改后点击表头会一直保持排序状态，循环切换asc和desc。

二、resetColumnOrder 的使用方法 #

resetColumnOrder 是 TanStack Table 实例提供的方法，用于将列的顺序重置为初始定义的顺序，使用前需先启用列排序功能：

1. 在useReactTable配置中启用列排序，并维护列顺序状态：

// 用useState维护列顺序状态
const [columnOrder, setColumnOrder] = useState([]);

const table = useReactTable({
  data,
  columns,
  state: {
    sorting,
    columnOrder, // 加入列顺序状态
  },
  onSortingChange: setSorting,
  onColumnOrderChange: setColumnOrder, // 加入列顺序变更回调
  enableColumnOrdering: true, // 启用列排序功能
  getCoreRowModel: getCoreRowModel(),
  getSortedRowModel: getSortedRowModel(),
  debugTable: true,
});

2. 在需要触发重置的位置调用table.resetColumnOrder()，比如添加按钮：

<button onClick={() => table.resetColumnOrder()}>重置列顺序</button>

点击该按钮后，列的排列会回到你最初定义columns数组时的顺序。

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