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

Question

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

我可以通过参考这个排序示例对所有列进行排序https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/sorting。现在我不希望对所有列进行排序，但希望对某些特定列进行排序，并且我希望按默认降序对 2 列进行排序。有人可以帮我解决这个问题吗？
对表格应用过滤器后，我想清除所有应用的过滤器。有人也可以帮助解决这个问题吗？

谢谢

Answer 1

给出的另一个答案是针对不使用反应钩子的反应表（< v7). In order to sort a column (or columns) when the table is built, you just have to set the sortBy array on the initialState in the useTable hook.

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

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

沙箱示例在这里： 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（我的自定义函数，不是来自反应表）：

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() 。我不确定它有什么功能，但不使用它不会产生我注意到的任何不良影响 - 库存多分类不起作用（保持轮班）但将其添加回来并没有解决这个问题。怀疑您可能需要为此使用库存的 toggleSort。

Answer 4

在第 7 版中。虽然最佳答案很好，但还不完整。

你需要两样东西

使用排序方式
要排序的列的记忆列表

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

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 5

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

在 React Table 中默认排序的情况下，有几个问题需要解决/解决。但与其他一些答案不同，除了 React Table 挂钩和道具之外，您不需要使用本地状态或任何东西。这只回答你的排序问题，不过滤：

disableSortRemove: true

是 React Table 道具；并添加它会让你到达一个地方，在第一次点击时你仍然有一个“未排序”状态，然后随后的点击被升序或降序排序，而不是默认行为，第三次点击让你回到“未分类”状态。这可能不是您想要的 UI，因为无论是否首先单击按钮，都应该做一些事情，但是对于那个变量，在第一次单击时它不会。

您希望默认对两列进行排序，并且只对 asc 或 desc 进行排序，因此您需要更多的元素。这是您的设置可能的样子。

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

这里我们添加了 3 个东西，而不仅仅是一个

disableSortRemove: true

。我们添加了：

disableSortRemove: true

,

defaultCanSort: true

, 和

initialState: { sortBy: [{ id: tableData[0]?.totalSeries?.series, desc: true }] },

我不认为你需要第二个（

defaultCanSort: true

）但是第一个和第三个给你你想要的效果：在页面加载时，排序是打开的，一旦你点击排序按钮，它就会以相反的方式排序。您添加到

initialState

数组的两列将默认排序。

完成。排序。

Answer 7

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

代替默认值：

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

你会做：

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

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

问题描述投票：0回答：7

7个回答

最新问题

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

问题描述 投票：0回答：7

7个回答

最新问题

问题描述投票：0回答：7