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

Posted 2023-02-19

【中文标题】如何在反应表中进行默认排序

【英文标题】：How to do default sorting in react-table

【发布时间】：2020-05-22 02:55:45

【问题描述】：

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

我可以通过参考这个排序示例 https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/sorting 对所有列进行排序。现在我不希望所有列都排序，但一些特定的列，我想默认降序对 2 列进行排序。有人可以帮我解决这个问题吗？

对表格应用过滤器后，我想清除所有应用的过滤器。有人也可以帮忙解决这个问题吗？

谢谢

【问题讨论】：

github.com/tannerlinsley/react-table/blob/master/docs/api/…这样可以吗？

谢谢@KrinaSoni，请问具体哪一个可以用于默认排序？

【参考方案1】：

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

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

【讨论】：

只是想补充一点，根据文档，sortBy 数组应该是 memoized 。参考：react-table.tanstack.com/docs/api/useSortBy#table-options

【参考方案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

【讨论】：

感谢@Oshini 的回复。我试图用访问器映射 id 但它不起作用。 :(你能帮我用其他方法吗？

您是否通过链接codesandbox.io/s/stupefied-hoover-ibz6f 。它显示的数据是默认排序的。

是的，我确实尝试过同样的事情，将 id 映射到访问器，但它不起作用:(

此解决方案不适用于使用 react-hooks 的 react-table 版本。请看我的回答：***.com/a/61278421/1571979

【参考方案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);

【参考方案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。

【参考方案5】：

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