React table - rearranging - group by keep position of column

Question

I'm using the useGroupBy hook to group my react-table table. However when grouping the default behaviour is to group re-arrange the columns in the table but I wan't to keep them in the same position, do you know how to do this with the optional useGroupByHook?

Here is the codesandbox: https://codesandbox.io/s/ecstatic-tree-bq19p?file=/src/App.js

When pressing groupby i.e age it will move age to the left..

Before grouping:

Answer 1

You can fix the ordering during table rendering:

 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>

You need to do the same trick for the headers