时间戳

首页 > 解决方案 > 反应表 - 重新排列 - 按列的保留位置分组

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

问题描述

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

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

当按 groupby 即年龄时，它将向左移动年龄..

分组前：

在此处输入图像描述

在此处输入图像描述

标签： react-table

解决方案

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

 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>

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

推荐阅读