React Table如何设置默认按New Cases列排序且仅指定列可切换排序

两个需求都可以通过React Table内置配置项实现，无需编写额外自定义排序逻辑，具体修改步骤如下：

• 列权限配置：控制哪些列支持用户点击排序
• 初始状态配置：设置表格首次加载的默认排序规则
• 渲染逻辑优化：避免禁用排序的列出现可点击交互

1. 列配置：控制列的排序权限 #

useSortBy默认给所有列开启点击排序能力，只需在不需要支持排序的列配置中添加disableSortBy: true，即可禁用对应列的排序切换交互，修改后的列配置如下：

export const COLUMNS = [
    {
        Header : 'Total Cases',
        accessor : 'totalcases',
        disableSortBy: true // 禁用用户点击排序
    },
    {
        Header : 'Active Cases',
        accessor : 'activecases'
        // 不配置disableSortBy，默认支持排序
    },
    {
        Header : 'Total Recovery',
        accessor : 'recovery'
        // 支持排序
    },
    {
        Header : 'Total Death',
        accessor : 'deaths',
        disableSortBy: true // 禁用排序
    },
    {
        Header : 'New Cases',
        accessor : 'newcases',
        disableSortBy: true // 仅作为默认排序列，禁止用户手动切换排序
    },
]

2. 全局配置：设置初始默认排序 #

调用useTable时传入initialState参数，在其中配置sortBy数组即可指定表格初始渲染时的排序规则，数组项的id对应列的accessor值，desc设为true是降序、false是升序，数值类统计场景默认用降序即可。

3. 渲染层修复 #

表头渲染时，对禁用排序的列不绑定getSortByToggleProps事件，同时调整鼠标样式，避免用户误以为可以点击。另外注意原代码中data的useMemo依赖数组为空，会导致外部传入的countryData更新时表格不重渲染，需要把countryData加入依赖项。

完整修改后的组件代码 #

import { useMemo } from 'react';
import { useTable, useGlobalFilter, useSortBy } from 'react-table';
import GlobalFilter from './GlobalFilter'; // 你已实现的全局搜索组件

export const COLUMNS = [
    {
        Header : 'Total Cases',
        accessor : 'totalcases',
        disableSortBy: true
    },
    {
        Header : 'Active Cases',
        accessor : 'activecases'
    },
    {
        Header : 'Total Recovery',
        accessor : 'recovery'
    },
    {
        Header : 'Total Death',
        accessor : 'deaths',
        disableSortBy: true
    },
    {
        Header : 'New Cases',
        accessor : 'newcases',
        disableSortBy: true
    },
] 

function Table({countryData}) {

    const columns = useMemo(()=> COLUMNS, []);
    // 修复原代码依赖缺失问题
    const data = useMemo(()=> countryData, [countryData]);

    const {
        getTableProps,
        getTableBodyProps,
        headerGroups,
        rows,
        prepareRow,
        state,
        setGlobalFilter,
    } =  useTable({
        columns,
        data,
        // 新增初始排序配置：默认按New Cases列降序排列
        initialState: {
            sortBy: [
                {
                    id: 'newcases',
                    desc: true
                }
            ]
        }
    }, useGlobalFilter, useSortBy);

    const { globalFilter } = state;

    return (
        <>
        <GlobalFilter filter={globalFilter} setFilter={setGlobalFilter}/>
        <table {...getTableProps()}>
            <thead>
                {headerGroups.map(headerGroup => (
                     <tr {...headerGroup.getHeaderGroupProps()}>
                        {headerGroup.headers.map(column => (
                            <th 
                                {...column.getHeaderProps(
                                    // 仅可排序列绑定排序切换事件
                                    column.disableSortBy ? {} : column.getSortByToggleProps()
                                )}
                                style={{ cursor: column.disableSortBy ? 'default' : 'pointer' }}
                            >
                                {column.render('Header')}
                                {/* 可选：显示当前排序方向标识 */}
                                <span style={{marginLeft: 4}}>
                                    {column.isSorted ? (column.isSortedDesc ? '↓' : '↑') : ''}
                                </span>
                            </th>
                        ))}
                    </tr>
                ))}
            </thead>
            <tbody {...getTableBodyProps()}>
                {rows.map((row) => {
                    prepareRow(row)
                    return (
                        <tr {...row.getRowProps()}>
                            {row.cells.map(cell => {
                                return <td {...cell.getCellProps()}>{cell.render('Cell')}</td>
                            })}
                        </tr>
                    )
                })}
            </tbody>
        </table>
        </>
    )
}

export default Table

配置说明 #

• disableSortBy是列级配置，仅阻止用户手动触发该列的排序切换，不会影响代码层面设置的初始排序规则
• initialState.sortBy支持配置多列排序，数组项的顺序就是排序优先级，比如先按A列排序，A列值相同的再按B列排序
• 初始排序的升降序可以根据业务需求调整，确诊、新增这类数据一般默认降序展示数值最大的项在最前

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