我使用react-table v7 https://www.npmjs.com/package/react-table来创建表。
1.我能够做排序的所有列参考这个例子排序https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/sorting。现在我不想所有列排序,但一些特定的列,我想排序2列默认降序。有人能帮我这个。
1.在对表应用过滤器后,我想清除所有应用的过滤器。有人也能帮助解决这个问题吗?
谢谢
7条答案
按热度按时间brvekthn1#
另一个答案是针对不使用react钩子的react-table(〈v7)。为了在构建表时对一列(或多列)进行排序,只需在useTable钩子中的initialState上设置sortBy数组。
xmq68pz92#
你可以传递排序选项到ReactTable,请尝试下面的代码。2如果要清除,请尝试单击按钮调用清除函数。
它对我有效https://codesandbox.io/s/stupefied-hoover-ibz6f
vmjh9lq93#
我有一个稍微不同的用例,希望在初始加载时获得默认的多排序,但同时也将该排序顺序保留在任何将来的排序之后
沙盒示例如下:https://codesandbox.io/s/goofy-shadow-9tskr?file=/src/App.js
诀窍是不要使用内置的getSortByToggleProps(),而是添加您自己的使用setSortBy函数的onClick。
下面的代码灵感来自@khai nguyen的回答
然后在列标题元素中:
和handleMultiSortByCode(我的自定义函数,不是来自react-table):
isSortedDesc可以为真/假/未定义
注意:默认的toggleSortBy()函数中有一个e.persist()。我不确定它的作用是什么,但不使用它并没有我注意到的任何不良影响--股票多重排序不起作用(按住shift),但将其添加回来并没有解决这个问题。我怀疑你可能需要股票toggleSort来完成这个任务。
eiee3dmh4#
你需要两样东西
最低限度的示例应包括:
并且还
示例链接:https://codesandbox.io/s/flamboyant-bassi-b94kyx?file=/src/App.js,包括对official sort example的细微更改
siv3szwd5#
您需要导入react-table提供的'useSortBy'钩子,使其按预期工作。
dly7yett6#
在React Table中默认排序的情况下,有几个问题需要解决。但与其他一些答案不同,除了React Table钩子和props之外,您不需要使用本地状态或其他任何东西。这只回答了您的排序问题,而不是过滤问题:
disableSortRemove: true
是React表属性;添加它会让你进入一个状态,在第一次点击时,你仍然会有一个“未排序”的状态,然后随后的点击会按升序或降序排序,这与默认的行为相反,在第三次点击时,你会回到一个“未排序”的状态。这可能不是你想要的UI,因为一个按钮点击,无论是第一次还是第二次,都应该做一些事情,但是有了这个变量,在第一次点击时,它不会。您希望默认情况下对两列进行排序,并且只按升序或降序排序,因此您还需要几个元素。
这里我们添加了3个东西,而不仅仅是
disableSortRemove: true
。我们添加了:disableSortRemove: true
、defaultCanSort: true
和initialState: { sortBy: [{ id: tableData[0]?.totalSeries?.series, desc: true }] },
我不认为你需要第二个(
defaultCanSort: true
),但第一个和第三个给予你你想要的效果:在页面加载时,排序是打开的,一旦你点击了排序按钮,它就会以相反的方式排序。你添加到initialState
数组中的两列将被默认排序。好了。搞定了。
ckx4rj1h7#
对于那些使用V8并希望避免我在文档中寻找答案时遇到的挫折的人,只需将初始状态提供给V8用于排序的useState:
代替默认值:
你会这样做: