Tanstack react-table v8大小写敏感排序失效，如何配置alphanumericCase？

要实现大小写敏感排序，你需要明确指定排序函数为内置的alphanumericCase——默认排序逻辑是不区分大小写的，这就是之前代码未生效的原因。有两种配置方式：

1. 全局配置（所有列默认启用） #

在useReactTable的配置参数里添加defaultSortingFn: 'alphanumericCase'，让所有列默认使用大小写敏感排序：

const table = useReactTable<TData>({
  data: dataMemoised,
  columns: columnsMemoised,
  state: {
    columnVisibility,
    columnOrder,
    columnPinning,
    rowSelection,
    sorting,
  },
  enableRowSelection: true,
  enableSortingRemoval: false,
  onRowSelectionChange: setRowSelection,
  onColumnVisibilityChange: setColumnVisibility,
  onColumnOrderChange: setColumnOrder,
  onColumnPinningChange: setColumnPinning,
  getCoreRowModel: getCoreRowModel(),
  getRowId,
  onSortingChange: setSorting,
  getSortedRowModel: getSortedRowModel(),
  // 全局启用大小写敏感排序
  defaultSortingFn: 'alphanumericCase',
})

2. 单独列配置（仅指定列生效） #

如果只需要某几列启用大小写敏感排序，直接在对应列的定义中添加sortingFn: 'alphanumericCase'即可：

const columnsMemoised = useMemo(() => [
  {
    accessorKey: 'username',
    header: '用户名',
    // 该列单独使用大小写敏感排序
    sortingFn: 'alphanumericCase',
  },
  // 其他列保持默认排序逻辑
  {
    accessorKey: 'email',
    header: '邮箱',
  },
], []);

alphanumericCase是React Table内置的排序函数，不需要额外导入，直接指定名称就能用。配置后，排序时会严格区分大小写（比如Apple会排在banana前面，因为大写字母的ASCII值小于小写字母）。

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