React Table V7如何通过外部下拉组件控制表格列排序

前置准备 #

首先确保你已经引入了React Table V7的核心包，以及官方提供的useSortBy排序插件。

步骤1：定义排序选项 #

先把你需要的下拉排序选项统一配置：

const sortOptions = [
  { value: 'score_desc', label: '按score从高到低排序' },
  { value: 'score_asc', label: '按score从低到高排序' },
  { value: 'firstName_desc', label: '按firstName从高到低排序' },
  { value: 'firstName_asc', label: '按firstName从低到高排序' },
  { value: 'lastName_desc', label: '按lastName从高到低排序' },
  { value: 'lastName_asc', label: '按lastName从低到高排序' },
]

步骤2：配置表格列与源数据 #

按你的表格结构配置列定义和对应数据源：

import { useTable, useSortBy } from 'react-table'
import { useState } from 'react'

const columns = [
  {
    Header: 'score',
    accessor: 'score'
  },
  {
    Header: 'firstName',
    accessor: 'firstName'
  },
  {
    Header: 'lastName',
    accessor: 'lastName'
  },
  // 剩余两列按你的实际业务需求补充即可
]

// 你的源数据示例
const data = [
  { score: 6, firstName: 'Anne', lastName: 'Faith' },
  { score: 10, firstName: 'Bob', lastName: 'Smith' }
]

步骤3：绑定排序逻辑与渲染组件 #

通过React Table暴露的setSortBy方法，将下拉选择的排序规则同步到表格实例：

function CustomSortTable() {
  // 存储选中的排序选项
  const [selectedSort, setSelectedSort] = useState('')

  const {
    getTableProps,
    getTableBodyProps,
    headerGroups,
    rows,
    prepareRow,
    setSortBy
  } = useTable(
    {
      columns,
      data,
      // 可选配置：禁用默认表头点击排序，避免和自定义下拉逻辑冲突
      disableSortBy: true
    },
    useSortBy
  )

  // 下拉变化时触发表格排序
  const handleSortChange = (e) => {
    const currentValue = e.target.value
    setSelectedSort(currentValue)
    if (!currentValue) return
    
    // 拆分选中值得到排序字段和升降序规则
    const [sortField, sortDir] = currentValue.split('_')
    setSortBy([{ id: sortField, desc: sortDir === 'desc' }])
  }

  return (
    <div>
      {/* 自定义排序下拉组件 */}
      <select value={selectedSort} onChange={handleSortChange}>
        <option value="">请选择排序方式</option>
        {sortOptions.map(option => (
          <option key={option.value} value={option.value}>
            {option.label}
          </option>
        ))}
      </select>

      {/* 表格渲染，和你给出的DOM结构对齐 */}
      <div className="s-table-container">
        <table className="s-table" {...getTableProps()}>
          <thead>
            {headerGroups.map(headerGroup => (
              <tr {...headerGroup.getHeaderGroupProps()}>
                {headerGroup.headers.map(column => (
                  <th {...column.getHeaderProps()}>
                    {column.render('Header')}
                  </th>
                ))}
              </tr>
            ))}
          </thead>
          <tbody {...getTableBodyProps()}>
            {rows.map(row => {
              prepareRow(row)
              return (
                <tr {...row.getRowProps()}>
                  {row.cells.map(cell => (
                    <td {...cell.getCellProps()}>
                      {cell.render('Cell')}
                    </td>
                  ))}
                </tr>
              )
            })}
          </tbody>
        </table>
      </div>
    </div>
  )
}

关键逻辑说明 #

• setSortBy是useSortBy插件暴露的手动控制排序的方法，接收数组类型的排序配置，支持多字段排序，单字段排序只需传入长度为1的数组即可
• 数值类型的score字段默认按数值大小排序，字符串类型的姓名字段默认按字典序排序，符合你的需求
• 如果需要保留原有的表头点击排序功能，删除配置项disableSortBy: true即可

内容的提问来源于stack exchange，提问作者Fer-de-lance