dynamic columns - works on first load but fails when columns change (w/o reinitializing component.)

[mikebean81]

I have a functional react-table that works just fine on initial build. I can also update the grid data based on the 'data' (usememo) dependency without troubles. Table updates/refreshes just fine.
However, when I implement a change to the columns themselves, there is a mismatch between the accessors (new updated columns vs originally build columns) and the table fails.

Looking through the hooks, it would appear that adding the proper dependency to the usememo for 'columns' should capture/account for this. However, when debugging, the headerGroups, rows, and page are all stale (show the old column accessors) even though the 'data'/'columns' have the new/proper accessors and the table fails. (It fails due to a mismatch in accessors - old vs new.) Am I missing something or is this not possible (seems like it should be...) Any way to recapture the rows/page/headerGroups used to build out the table properties without having to page off/reinitialize the componet alltogether?

[mikebean81]

BTW, I've found a couple work arounds for this but don't think they are the best implementation.

Work around 1 - just include the definition for all columns when initializing and show/hide the columns I want at a given time. This works but isn't really scalable and for our implementation, will not be suitable (think of allowing a user to pick and choose which columns they want generated in their table.) They are then able to change these and subsequently, regenerate their table.

Work around 2 - remount the react-table component (we are using angular for our application and wrapping react components inside it..not ideal but just how things grew over time) when something triggers new column definitions. Yes this works (and is what I'm doing now) but goes against some react principles.