fix(AnalyticalTable): reconcile columnOrder with columns on reorder (#8290)

Author: Lukas742

packages/main/src/components/AnalyticalTable/AnalyticalTable.cy.tsx

@@ -2034,6 +2034,7 @@ describe('AnalyticalTable', () => {
       });
     });
   });
+
   it('columns drag & drop', () => {
     const localCols = [...columns];
     localCols.pop();
@@ -2058,6 +2059,78 @@ describe('AnalyticalTable', () => {
     cy.get('@reorder').should('have.been.calledTwice');
   });
 
+  it('columns drag & drop: reorder then add/remove column', () => {
+    const baseCols = [
+      { accessor: 'name', Header: 'Name' },
+      { accessor: 'age', Header: 'Age' },
+      { accessor: 'friend.name', Header: 'Friend Name' },
+    ];
+    const extraCol = { accessor: 'friend.age', Header: 'Friend Age' };
+    const reorder = cy.spy().as('reorder');
+
+    const TestComp = () => {
+      const [cols, setCols] = useState(baseCols);
+      return (
+        <>
+          <Button
+            onClick={() => {
+              setCols((prev) => (prev.length === 3 ? [...prev, extraCol] : prev.slice(0, 3)));
+            }}
+          >
+            Toggle Column
+          </Button>
+          <AnalyticalTable data={data} columns={cols} onColumnsReorder={reorder} />
+        </>
+      );
+    };
+
+    const dataTransferById = (colId) => ({
+      getData: () => colId,
+    });
+
+    cy.mount(<TestComp />);
+    // name -> age => [age, name, friend.name]
+    cy.get('[data-column-id="name"]')
+      .trigger('dragstart')
+      .trigger('drop', { dataTransfer: dataTransferById('age') });
+    cy.get('[data-column-id]').each(($col, index) => {
+      cy.wrap($col).should('have.text', ['Age', 'Name', 'Friend Name'][index]);
+    });
+
+    // add friend.age => [age, name, friend.name, friend.age]
+    cy.findByText('Toggle Column').click();
+    cy.get('[data-column-id]').should('have.length', 4);
+    cy.get('[data-column-id]').each(($col, index) => {
+      cy.wrap($col).should('have.text', ['Age', 'Name', 'Friend Name', 'Friend Age'][index]);
+    });
+    cy.get('[role="separator"]').eq(0).click();
+
+    // friend.age -> age => [friend.age, age, name, friend.name]
+    cy.get('[data-column-id="age"]')
+      .trigger('dragstart')
+      .trigger('drop', { dataTransfer: dataTransferById('friend.age') });
+    cy.get('[data-column-id]').each(($col, index) => {
+      cy.wrap($col).should('have.text', ['Friend Age', 'Age', 'Name', 'Friend Name'][index]);
+    });
+
+    // remove friend.age => [age, name, friend.name]
+    cy.findByText('Toggle Column').click();
+    cy.get('[data-column-id]').should('have.length', 3);
+    cy.get('[data-column-id]').each(($col, index) => {
+      cy.wrap($col).should('have.text', ['Age', 'Name', 'Friend Name'][index]);
+    });
+
+    // friend.name -> age => [friend.name, age, name]
+    cy.get('[data-column-id="age"]')
+      .trigger('dragstart')
+      .trigger('drop', { dataTransfer: dataTransferById('friend.name') });
+    cy.get('[data-column-id]').each(($col, index) => {
+      cy.wrap($col).should('have.text', ['Friend Name', 'Age', 'Name'][index]);
+    });
+
+    cy.get('@reorder').should('have.callCount', 3);
+  });
+
   it('w/o selection column', () => {
     cy.mount(
       <AnalyticalTable

packages/main/src/components/AnalyticalTable/hooks/useDragAndDrop.ts

@@ -1,9 +1,5 @@
 import { enrichEventWithDetails } from '@ui5/webcomponents-react-base';
-import type { ReactTableHooks, TableInstance } from '../types/index.js';
-
-const getColumnId = (column) => {
-  return typeof column.accessor === 'string' ? column.accessor : column.id;
-};
+import type { ColumnType, ReactTableHooks, TableInstance } from '../types/index.js';
 
 function getHeaderProps(
   props: Record<string, unknown>,
@@ -39,7 +35,19 @@ function getHeaderProps(
     const draggedColId = e.dataTransfer.getData('text');
     if (droppedColId === draggedColId) return;
 
-    const internalColumnOrder = columnOrder.length > 0 ? columnOrder : columns.map((col) => getColumnId(col));
+    // Reconciliation uses same approach as visibleColumns in plugin-hooks/useColumnOrder.js of react-table
+    const columnOrderCopy = [...columnOrder];
+    const columnsCopy = [...columns];
+    const columnsInOrder: ColumnType[] = [];
+
+    while (columnsCopy.length && columnOrderCopy.length) {
+      const targetId = columnOrderCopy.shift();
+      const foundIndex = columnsCopy.findIndex((col) => col.id === targetId);
+      if (foundIndex > -1) {
+        columnsInOrder.push(columnsCopy.splice(foundIndex, 1)[0]);
+      }
+    }
+    const internalColumnOrder = [...columnsInOrder, ...columnsCopy].map((col) => col.id);
     const droppedColIdx = internalColumnOrder.findIndex((col) => col === droppedColId);
     const draggedColIdx = internalColumnOrder.findIndex((col) => col === draggedColId);
 
@@ -50,7 +58,7 @@ function getHeaderProps(
     setColumnOrder(tempCols);
 
     if (typeof onColumnsReorder === 'function') {
-      const columnsNewOrder = tempCols.map((tempColId) => columns.find((col) => getColumnId(col) === tempColId));
+      const columnsNewOrder = tempCols.map((tempColId) => columns.find((col) => col.id === tempColId));
       onColumnsReorder(
         enrichEventWithDetails(e, {
           columnsNewOrder,