react-table - react 表 - 重新排列 - 按列的保留位置分组

Question

我正在使用 useGroupBy 钩子(Hook)对我的 react-table 表进行分组。但是，当分组时，默认行为是对表中的列进行分组重新排列，但我不想将它们保持在相同的位置，您知道如何使用可选的 useGroupByHook 来做到这一点吗？

这是代码和框:https://codesandbox.io/s/ecstatic-tree-bq19p?file=/src/App.js

当按 groupby 即 age 时，它​​会将 age 向左移动..

分组前:

Answer 1

您可以在表格渲染期间修复排序:

 const fixColumnOrder = (cells) => columns.map(column => cells.find(cell => cell.column.id === column.id))

 <tr {...row.getRowProps()}>
   {fixColumnOrder(row.cells).map((cell) => {
     return (
       <td {...cell.getCellProps()}>
          {cell.render('Cell')}
       </td>
     )
   })}
 </tr>

您需要对标题执行相同的技巧