reactjs 是否使React表仅在升序和降序之间排序？

ubby3x7f 于 2023-03-01 发布在 React

关注(0)|答案(3)|浏览(160)

React表排序有3个条件：default view、ascending和descending，如其官方示例https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/sorting所示
现在，我只想在ascending和descending之间进行排序，并删除默认视图。

useTable(
    {
      columns,
      data,
      initialState: {
        pageIndex: 0,
        pageSize: 10,
        sortBy: [
          {
            id: "asset",
            desc: false,
          },
        ],
      },
    },
  )

但是当我点击列时默认视图仍然存在，我不知道如何删除它。我在他们的文档中也找不到它。

reactjs

来源：https://stackoverflow.com/questions/64237143/make-react-table-sort-only-between-ascending-and-descending-order

3条答案

按热度按时间

cvxl0en21#

useSortBy文档提到了一个disableSortRemove选项，可以在调用useTable时指定该选项。
如果为true，则列排序后将无法使用未排序状态。

赞(0）回复(0）举报 2023-03-01

gfttwv5a2#

对于以后会遇到这个React表排序问题的人，这里有一个更具体的问题。如果你单独使用disableSortRemove: true，你仍然会有第一次点击是一个"未排序"的状态，然后随后的点击是升序或降序排序。这可能不是你想要的UI，因为一个按钮点击，无论是第一次还是第二次，都应该做一些事情，但是对于这个变量，第一次点击它不会。
这样您就不必单击排序按钮两次来查看排序，请执行以下操作!

const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow } = useTable(
    {
      columns: tableColumns,
      data: tableData,
      disableSortRemove: true,
      defaultCanSort: true,
      initialState: {
        sortBy: [{ id: tableData[0]?.totalSeries?.totalSeries, desc: true }], //TODO: adjust TableData type file
      },
    },
    useSortBy
  );

这里我们添加了3个东西，而不仅仅是disableSortRemove: true。我们添加了：
disableSortRemove: true、defaultCanSort: true和initialState: { sortBy: [{ id: tableData[0]?.totalSeries?.totalSeries, desc: true }]//重要信息：在此处使用您自己的数据形状}，
我不认为你需要第二个（defaultCanSort: true），但第一个和第三个给你你想要的效果：在页面加载时，排序是打开的，一旦单击排序按钮，它就会以相反的方式排序。
好了。搞定了。

赞(0）回复(0）举报 2023-03-01

o0lyfsai3#

enableSortingRemoval:false，
启用/禁用删除表排序的功能。如果为真，则更改排序顺序将循环如下："无"-〉"说明"-〉"上升"-〉"无"-〉...
如果为false，则更改排序顺序将循环如下："无"-〉"说明"-〉"上升"-〉"说明"-〉"上升"-〉...
请在此处-https://tanstack.com/table/v8/docs/api/features/sorting找到此属性"enableSortingRemoval"

赞(0）回复(0）举报 2023-03-01

我来回答

reactjs 是否使React表仅在升序和降序之间排序？

3条答案

相关问题

热门标签

最新问答