使 react-table 仅在升序和降序之间排序？

Question

React table 排序有 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,
          },
        ],
      },
    },
  )

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

Answer 1

useSortBy documentation提到了调用useTable时可以指定的disableSortRemove选项。

If true, the un-sorted state will not be available to columns once they have been sorted.

Answer 2

对于稍后出现此 React Table 排序问题的任何人，这里有一些更具体的内容。如果单独使用 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)，但是第一个和第三个可以达到您想要的效果：在页面加载时，排序打开，一旦您单击排序按钮，它就会排序相反的方式。

完成。已排序。

使 react-table 仅在升序和降序之间排序？

Make react-table sort only between ascending and descending order?

reactjs

react-table

react-table-v7