Table: Column order is not respected when external columns change

[HaveSpacesuit]

When changing columns after dragging a column, the new columns are in an unexpected order.

To reproduce:

• Create a table with enableColumnReordering
• Drag a column to a different position
• Update the columns passed to the table
  • Must be done in code by changing columns object, rather than the built-in column manager
• The updated columns do not follow the same order as the columns passed to the table

https://codesandbox.io/s/itwinui-react-minimal-example-forked-3cxy87?file=/src/App.tsx

[HaveSpacesuit]

This is a minor issue. We've implemented a work around in our app with a state reducer which compares the order of the columns we expect versus the order of the columns in the ReactTable state. But if there was an easy fix, it would help.

[mayank99]

@HaveSpacesuit Thanks for the update. We plan to look into this after our major release, which should happen very soon.

[r100-stack]

This is happening because of the stale columnOrder affecting the new columns.

In your example:

1. Initially, columns = [index, name, desc], columnOrder = []
2. Drag desc to name. columns = [index, name, desc], columnOrder = [index, desc, name]
3. Now we pass new columns to Table. columns = [id, name, startDate, endDate], columnOrder = [index, desc, name]

Since name from columns is in columnOrder, that is the first column displayed. Since the other three columns are not in columnOrder, it is displayed in the same order as passed in columns.

That is why the final order in your screenshot is [name] (fixed) + [id, startDate, endDate] (remaining)

Docs:

One fix could be to reset the columnOrder to [] when columns changes. I made a PR #983 with this fix. If there is a better approach, I will update this PR to that approach.