如何在反应表中进行默认排序

Question

我正在使用 react-table v7 https://www.npmjs.com/package/react-table创建表。

1. 通过参考这个排序https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/sorting示例，我可以对所有列进行排序。现在我不希望对所有列进行排序，而是希望对某些特定列进行排序，并且我希望默认降序对 2 列进行排序。有人可以帮我解决这个问题。

2. 将过滤器应用于表后，我想清除所有应用的过滤器。有人也可以帮忙解决这个问题吗？

谢谢

Answer 1

给出的另一个答案是针对不使用反应钩子（< v7）的反应表。为了在构建表时对一列（或多列）进行排序，您只需在 useTable 钩子中的 initialState 上设置 sortBy 数组。

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

Answer 2

对于那些使用 V8 并希望避免我在文档中寻找答案的挫败感的人，您只需将初始状态提供到 V8 用于排序的 useState 中即可：

而不是默认的：

const [sorting, setSorting] = useState<SortingState>([]);

你会这样做：

const [sorting, setSorting] = useState<SortingState>([
    {id: "time", desc: true}
]);

Answer 3

在版本 7 中。虽然最上面的答案很好，但它并不完整。

你需要 2 件事

• 使用排序依据
• 记忆的要排序的列列表

一个最小的例子应该包括：

const sortees = React.useMemo(
  () => [
    {
      id: "firstName",
      desc: false
    }
  ],
  []
);

并且

import { useTable, useSortBy } from "react-table";
...
useTable(
  {
    initialState: {
      sortBy: sortees,
    }
  },
  useSortBy,
);

示例链接：https://codesandbox.io/s/flamboyant-bassi-b94kyx? file=/src/App.js 其中包括对官方排序示例的细微更改

Answer 4

您可以将排序选项传递给 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