给出的另一个答案是对于没有使用 react hook（& lt;v7）的 react-table。为了在构建表时对列（或列）进行排序，您只需要在 useTable 钩子中的 initialState 上设置 sortBy 数组。

const {
    getTableProps,
    getTableBodyProps,
    ...
} = useTable(
    {
        columns,
        ....,
        initialState: {
            sortBy: [
                {
                    id: 'columnId',
                    desc: false
                }
            ]
        }
    }

您可以将排序的选项传递给 ReactTable，请尝试使用的代码。为了清除尝试按钮点击调用清除函数。

  constructor(props) {
    super(props);
    this.state = {
      sortOptions: [{ id: 'age', desc: true },{ id: 'visits', desc: true }],
     }
  }
 <Table 
    sorted={this.state.sortOptions}
    onSortedChange={val => {
    this.setState({ sortOptions: val }) }}
    columns={columns} 
    data={data} />

它为我工作https://codesandbox.io/s/stupefied-hoover-ibz6f

我有一个稍微不同的用例，并希望在初始加载时默认获得多排序，但也将排序顺序保持在任何未来的排序之后

沙箱示例：https://codesandbox.io/s/goofy--9tskr?file=/src/App.js

诀窍是不使用内置的 getSortByToggleProps（），而是添加自己的 onClick 使用 setSortBy func。

的代码灵感来自 @ khai nguyen 的答案

import React from 'react'
import { useTable, useSortBy } from 'react-table';
function Table({ columns, data, sortBy ...rest }) {
    const {
        getTableProps,
        getTableBodyProps,
        headerGroups,
        rows,
        prepareRow,
        setSortBy,
    } = useTable({
        columns,
        data,
        initialState: {sortBy}
        })
    }, useSortBy); 

然后在列标题元素中：

     ...PREV_TABLE_CODE
{headerGroup.headers.map(column => (
         <th
         {...column.getHeaderProps()}
         onClick={() => handleMultiSortBy(column, setSortBy, sortBy)}
          >
         {column.render( 
REST_TABLE_CODE....

和 handleMultiSortByCode（我的自定义函数，而不是从反应表）：

isSortedDesc 可以是 true / false / undefined

export const handleMultiSortBy = (column, setSortBy, meinSortBy) => {
  //set sort desc, aesc or none?
  const desc =
    column.isSortedDesc === true
      ? undefined
      : column.isSortedDesc === false
      ? true
      : false;
  setSortBy([{ id: column.id, desc }, ...meinSortBy]);
};
 

注意:默认的 toggleSortBy () func 中有一个 e.persist ()。我不确定它提供了什么功能,但不使用它没有任何我注意到的不良影响-股票多重排序不起作用 (保持移位),但添加回来并没有解决这个问题。怀疑你可能需要股票 toggleSort。

您需要导入 react-table 提供的 'useSortBy' 钩子,以使其按预期工作。

import React from 'react'
import { useTable, useSortBy } from 'react-table';
function Table({ columns, data, ...rest }) {
    const {
        getTableProps,
        getTableBodyProps,
        headerGroups,
        rows,
        prepareRow,
    } = useTable({
        columns,
        data,
        ...(rest.initialState && {
            initialState: rest.initialState
        })
    }, useSortBy);