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

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

给出的另一个答案是针对不使用反应钩子的反应表（

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

Answer 2

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

Answer 3

您需要导入 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);

Answer 4

我有一个稍微不同的用例，希望在初始加载时默认进行多重排序，但同时也要保持该排序顺序落后于任何未来的排序

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

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

以下代码灵感来自@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()。我不确定它提供了什么功能，但不使用它并没有我注意到的任何不良影响 - 库存多重排序不起作用（保持班次）但将其添加回来并不能解决这个问题。怀疑您可能需要 stock toggleSort。

Answer 5

非常感谢！我终于整理出了答案！关于默认排序，我对表格的数据进行了降序排序，默认情况下得到的数据为降序。对于清除按钮How to clear all filters in react-table，请参考此链接！