From 305b253417117ef7fe6fbd77db060c5193377ed8 Mon Sep 17 00:00:00 2001
From: Oliver <oliver.henry.walters@gmail.com>
Date: Thu, 3 Jul 2025 13:32:53 +1000
Subject: [PATCH] [UI] Fix table column ordering (#9945)

* Fix table column ordering

- Ensure that table columns are always rendererd in the correct order

* Cleanup code

* Adjust col order
---
 src/frontend/src/tables/InvenTreeTable.tsx    | 23 ++++++++++---------
 .../tables/build/BuildAllocatedStockTable.tsx | 12 +++++-----
 2 files changed, 18 insertions(+), 17 deletions(-)

diff --git a/src/frontend/src/tables/InvenTreeTable.tsx b/src/frontend/src/tables/InvenTreeTable.tsx
index 546a705a0b..483ff23c1b 100644
--- a/src/frontend/src/tables/InvenTreeTable.tsx
+++ b/src/frontend/src/tables/InvenTreeTable.tsx
@@ -378,19 +378,20 @@ export function InvenTreeTable<T extends Record<string, any>>({
   // Ensure that the "actions" column is always at the end of the list
   // This effect is necessary as sometimes the underlying mantine-datatable columns change
   useEffect(() => {
-    const idx: number = tableColumns.columnsOrder.indexOf(
-      ACTIONS_COLUMN_ACCESSOR
-    );
+    // Ensure that the columns are always in the order specified by the columns prop
+    const columnOrder = tableColumns.columnsOrder.slice().sort((a, b) => {
+      const idxA = dataColumns.findIndex((col: any) => col.accessor == a);
+      const idxB = dataColumns.findIndex((col: any) => col.accessor == b);
+      return idxA - idxB;
+    });
 
-    if (idx >= 0 && idx < tableColumns.columnsOrder.length - 1) {
-      // Actions column is not at the end of the list - move it there
-      const newOrder = tableColumns.columnsOrder.filter(
-        (col) => col != ACTIONS_COLUMN_ACCESSOR
-      );
-      newOrder.push(ACTIONS_COLUMN_ACCESSOR);
-      tableColumns.setColumnsOrder(newOrder);
+    // Update the columns order only if it has changed
+    if (
+      JSON.stringify(tableColumns.columnsOrder) != JSON.stringify(columnOrder)
+    ) {
+      tableColumns.setColumnsOrder(columnOrder);
     }
-  }, [tableColumns.columnsOrder, tableColumns.setColumnsOrder]);
+  }, [dataColumns, tableColumns.columnsOrder]);
 
   // Reset the pagination state when the search term changes
   useEffect(() => {
diff --git a/src/frontend/src/tables/build/BuildAllocatedStockTable.tsx b/src/frontend/src/tables/build/BuildAllocatedStockTable.tsx
index 60ece4fcff..0c96daa9ca 100644
--- a/src/frontend/src/tables/build/BuildAllocatedStockTable.tsx
+++ b/src/frontend/src/tables/build/BuildAllocatedStockTable.tsx
@@ -112,12 +112,6 @@ export default function BuildAllocatedStockTable({
         sortable: true,
         switchable: true
       },
-      {
-        accessor: 'quantity',
-        title: t`Allocated Quantity`,
-        sortable: true,
-        switchable: false
-      },
       {
         accessor: 'serial',
         title: t`Serial Number`,
@@ -137,6 +131,12 @@ export default function BuildAllocatedStockTable({
         title: t`Available Quantity`,
         render: (record: any) => record?.stock_item_detail?.quantity
       },
+      {
+        accessor: 'quantity',
+        title: t`Allocated Quantity`,
+        sortable: true,
+        switchable: false
+      },
       LocationColumn({
         accessor: 'location_detail',
         switchable: true,