[英]How to do default sorting in react-table
I am using react-table v7 https://www.npmjs.com/package/react-table for creating tables.我正在使用 react-table v7 https://www.npmjs.com/package/react-table创建表。
I am able to do sorting to all the columns by referring this example of sorting https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/sorting .通过参考这个排序https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/sorting示例,我可以对所有列进行排序。 Now I dont want all columns to sort but some specfic columns and I want to sort 2 columns by default descending.
现在我不希望对所有列进行排序,而是希望对某些特定列进行排序,并且我希望默认降序对 2 列进行排序。 Can someone please help me with this.
有人可以帮我解决这个问题。
After applying filters to the table I want to clear all the applied filters.将过滤器应用于表后,我想清除所有应用的过滤器。 Can someone please help in solving this issue too ?
有人也可以帮忙解决这个问题吗?
Thank you谢谢
The other answer given was for react-table that didn't use react hooks (< v7).给出的另一个答案是针对不使用反应钩子(< 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.
为了在构建表时对一列(或多列)进行排序,您只需在 useTable 钩子中的 initialState 上设置 sortBy 数组。
const {
getTableProps,
getTableBodyProps,
...
} = useTable(
{
columns,
....,
initialState: {
sortBy: [
{
id: 'columnId',
desc: false
}
]
}
}
you can pass sorted options to ReactTable please try with below code.您可以将排序选项传递给 ReactTable 请尝试使用以下代码。 And for clear try with button click call clear function.
并为清除尝试按钮单击调用清除功能。
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} />
It works for me https://codesandbox.io/s/stupefied-hoover-ibz6f它对我有用 https://codesandbox.io/s/stupefied-hoover-ibz6f
You need to import the 'useSortBy' hook provided by react-table to make it work as expected.您需要导入 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);
I had a slightly different use case and wanted to get multi-sorting by default on initial load, but then also keep that sorting order behind any future sorts我有一个略有不同的用例,并希望在初始加载时默认进行多重排序,但也将该排序顺序保留在任何未来排序之后
sandbox example here: https://codesandbox.io/s/goofy-shadow-9tskr?file=/src/App.js沙盒示例: https : //codesandbox.io/s/goofy-shadow-9tskr?file=/ src/ App.js
The trick is NOT using the built in getSortByToggleProps() and instead adding your own onClick that uses the setSortBy func.诀窍不是使用内置的 getSortByToggleProps() 而是添加您自己的使用 setSortBy 函数的 onClick 。
Below code inspired from @khai nguyen's answer以下代码灵感来自@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);
Then in your column header element:然后在您的列标题元素中:
...PREV_TABLE_CODE
{headerGroup.headers.map(column => (
<th
{...column.getHeaderProps()}
onClick={() => handleMultiSortBy(column, setSortBy, sortBy)}
>
{column.render(
REST_TABLE_CODE....
and the handleMultiSortByCode (my custom function, not from react-table):和 handleMultiSortByCode(我的自定义函数,不是来自 react-table):
isSortedDesc can be either true/false/undefined isSortedDesc 可以是真/假/未定义
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]);
};
Note: The default toggleSortBy() func had a e.persist() in it.注意:默认的 toggleSortBy() 函数中有一个 e.persist() 。 I'm not sure what function it served, but not using it doesn't have any ill effects that I've noticed - the stock multi-sort doesn't work (holding shift) but adding it back didn't fix that.
我不确定它提供了什么功能,但不使用它并没有我注意到的任何不良影响 - 股票多重排序不起作用(保持班次)但将其添加回来并没有解决这个问题。 Suspect you might need the stock toggleSort for that.
怀疑您可能需要股票 toggleSort。
Thanks a lot !非常感谢 ! I sorted out the answer at-last !
我终于把答案整理出来了! About default Sort, I sorted the data of the table descending and got the data by-default as descending .
关于默认排序,我对表的数据进行了降序排序,得到的数据默认为降序。 And for clear button How to clear all filters in react-table , please do refer this link !
对于清除按钮如何清除 react-table 中的所有过滤器,请参阅此链接!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.