如何在React-Table中进行默认排序

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. 在将过滤器应用于表格后，我想清除所有应用的过滤器。请问有人可以帮忙解决这个问题吗？

谢谢

- Blessy Julie

---

谢谢@KrinaSoni，可以具体说明一下哪个可以用于默认排序吗？ - Blessy Julie

Answer 1

另一个给出的答案是针对不使用React Hooks（< v7）的react-table。为了在构建表格时对列进行排序（或多列），您只需要在useTable Hook中的initialState中设置sortBy数组。

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

- Chuck L

---

根据文档，需要对sortBy数组进行记忆化处理。参考：https://react-table.tanstack.com/docs/api/useSortBy#table-options - dglozano

你忘记提到必需的 useSortBy，就像这里一样：https://dev59.com/alIH5IYBdhLWcg3wVMWj#72436628 - Smily

Answer 2

对于那些使用V8并且想要避免我在文档中寻找答案时所遇到的困惑的人，你只需将你的初始状态提供给V8用于排序的useState函数即可：

而不是使用默认值：

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

你会做：

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

- kev1n

Answer 3

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

- Oshini

---

谢谢@Oshini的回复。我尝试使用访问器映射id，但它没有起作用。:( 你能帮我想其他办法吗？ - Blessy Julie

你有没有访问过链接 https://codesandbox.io/s/stupefied-hoover-ibz6f 。它默认显示数据已经排序。 - Oshini

是的，我尝试过同样的事情，使用访问器映射了ID，但是它没有起作用 :( - Blessy Julie

非常感谢！我最终整理出了答案！关于默认排序，我将表格数据按降序排列，并且默认情况下得到的数据也是降序的。至于清除按钮，请参考此链接：https://dev59.com/ybnoa4cB1Zd3GeqPOVJE。 - Blessy Julie

此解决方案不适用于使用React Hooks的react-table版本。请参见我的答案: https://dev59.com/alIH5IYBdhLWcg3wVMWj#61278421 - Chuck L

Answer 4

在版本7中，最佳答案不错，但并不完整。

你需要两个东西:

• 使用useSortBy
• 记忆列排序的列表

一个最小化的示例应该包括：

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，其中包括对官方排序示例的轻微更改。

- Smily

Answer 5

我的用例略有不同，我希望在初始加载时以默认的多重排序方式进行排序，但是在未来的任何排序操作之后也保持该排序顺序。

这里有一个沙盒示例： https://codesandbox.io/s/goofy-shadow-9tskr?file=/src/App.js

诀窍在于不使用内置的getSortByToggleProps()函数，而是添加自己的onClick事件，使用setSortBy()函数。

以下代码来源于@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（我的自定义函数，不是来自 react-table 库）：

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()函数中有一个e.persist()。我不确定它起到了什么作用，但不使用它似乎没有任何不良影响 - 原生的多重排序（按住shift）不起作用，但添加回去也无法修复。猜测您可能需要原生的toggleSort来解决这个问题。

- sirclesam

Answer 6

你需要导入由react-table提供的'useSortBy' hook，以使其按预期工作。

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);

- Khai Nguyen

Answer 7

在React表格默认排序的情况下，有一些问题需要处理和排序。但与其他答案不同，除了React Table钩子和props之外，您不需要使用本地状态或任何东西。这只回答了您的排序问题，而不是过滤：disableSortRemove: true 是React Table prop; 添加它可以让您在第一次单击时处于“未排序”状态，然后后续单击按升序或降序排列，而不是默认行为，即第三次单击使您回到“未排序”状态。也许这不是您想要的UI，因为按钮点击，首次或不首次，都应该做点什么，但通过一个变量，第一次单击不会做什么。

您希望默认情况下按两列排序，并且仅按升序或降序排序，因此需要几个更多的元素。这是您的设置可能看起来像什么。

const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow } = useTable(
    {
      columns: tableColumns,
      data: tableData,
      disableSortRemove: true,
      defaultCanSort: true,
      initialState: {
        sortBy: [{ id: tableData[0]?.totalSeries?.series, desc: true }], // IMPORTANT: Use your own data structure and add as many columns that need sorting by default
      },
    },
    useSortBy
  );

在这里，我们添加了三个东西，而不仅仅是一个 disableSortRemove: true。我们添加了：

disableSortRemove: true、 defaultCanSort: true， 以及 initialState: { sortBy: [{ id: tableData[0]?.totalSeries?.series, desc: true }] },

我认为你不需要第二个 (defaultCanSort: true) 但是第一个和第三个可以给你想要的效果：在页面加载时，排序已经启用，一旦你点击排序按钮，它会按相反的方式进行排序。你添加到 initialState 数组中的两列将默认排序。

完成。排序好了。

- Cat Perry

Answer 8

在React Table版本8中，您可以轻松地使用初始配置实现排序。以下是一个说明性示例，演示如何实现排序。

const table = useReactTable(
  {
    data,
    columns,
    initialState: {
      sorting: [
        {
          id: 'columnId', // Replace with the ID of the column you want to sort
          desc: true,     // Set to `true` for descending order, or `false` for ascending
        }
      ]
    }
  },
);

- Moshe Fortgang