反应表按另一列排序一列答案

【问题标题】：react table sort a column by another column反应表按另一列排序一列
【发布时间】：2021-04-19 08:14:25
【问题描述】：

我正在尝试按隐藏列对我的表格数据进行排序，例如如果我点击 data_1，我希望它按我的隐藏列 data_2 排序，可以吗？

toggleSortBy: Function(descending, multi) => void

这个功能可能有效，但我不知道它是如何工作的

【问题讨论】：

能否请您提供一个示例和完整的描述？抱歉，我没听懂你说什么
@JabalLogian 例如：column: { Header: "Name", accessor: "name", },{ Header: "id", accessor: "id", isVisible:false }, 如果我单击“名称”列，我希望该列按隐藏的 id 排序

标签： javascript reactjs react-table

【解决方案1】：

sortType 作为函数可以帮助解决上述问题，详细信息可以在 - https://react-table.tanstack.com/docs/api/useSortBy#column-options

【讨论】：

【解决方案2】：

我也在尝试为此寻找解决方案，这是我的解决方法，但我仍在寻找不覆盖 onclick 回调函数的方法。

在useTable Hook中添加toggleSortBy属性（稍后会用到）

     const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow, toggleSortBy } =
 useTable({ columns, data, initialState }, useSortBy);

覆盖 useSortBy 钩子中的 onclick 属性

              <th
               {...column.getHeaderProps(column.getSortByToggleProps())}
               onClick={(e) => {
                 e.persist();
                 if (column.id === 'name') {
                   toggleSortBy('id', false, false);
                   return;
                 }
                 column.toggleSortBy(undefined, false);
               }}

Here is source code of useSortBy

您也可以在这里试用几个示例：enter link description here

【讨论】：