From e6f18db8003373c970ec001d286517e1715ff15b Mon Sep 17 00:00:00 2001
From: Oliver <oliver.henry.walters@gmail.com>
Date: Fri, 18 Jul 2025 11:28:41 +1000
Subject: [PATCH] Fix rendering glitch in tables (#10041)

* Fix rendering glitch in tables

- Table render could glitch based on cached column order
- React does not handle array dependencies well sometimes
- Change when column order is recalculated

* Simplify effect chain

- Memoize columns order
- Simply overwrite with columns order
---
 src/frontend/src/tables/InvenTreeTable.tsx    | 27 +++++++++++--------
 .../tables/purchasing/PurchaseOrderTable.tsx  |  4 ++-
 2 files changed, 19 insertions(+), 12 deletions(-)

diff --git a/src/frontend/src/tables/InvenTreeTable.tsx b/src/frontend/src/tables/InvenTreeTable.tsx
index 996e07d1a0..13c1a49de4 100644
--- a/src/frontend/src/tables/InvenTreeTable.tsx
+++ b/src/frontend/src/tables/InvenTreeTable.tsx
@@ -309,26 +309,31 @@ export function InvenTreeTable<T extends Record<string, any>>({
   // Final state of the table columns
   const tableColumns = useDataTableColumns({
     key: cacheKey,
-    columns: dataColumns
+    columns: dataColumns,
+    getInitialValueInEffect: false
   });
 
+  // Cache the "ordering" of the columns
+  const dataColumnsOrder: string[] = useMemo(() => {
+    return dataColumns.map((col: any) => col.accessor);
+  }, [dataColumns]);
+
   // 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(() => {
-    // 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;
-    });
-
     // Update the columns order only if it has changed
     if (
-      JSON.stringify(tableColumns.columnsOrder) != JSON.stringify(columnOrder)
+      JSON.stringify(tableColumns.columnsOrder) !=
+      JSON.stringify(dataColumnsOrder)
     ) {
-      tableColumns.setColumnsOrder(columnOrder);
+      tableColumns.setColumnsOrder(dataColumnsOrder);
     }
-  }, [dataColumns, tableColumns.columnsOrder]);
+  }, [
+    cacheKey,
+    dataColumnsOrder,
+    tableColumns.columnsOrder,
+    tableColumns.setColumnsOrder
+  ]);
 
   // Reset the pagination state when the search term changes
   useEffect(() => {
diff --git a/src/frontend/src/tables/purchasing/PurchaseOrderTable.tsx b/src/frontend/src/tables/purchasing/PurchaseOrderTable.tsx
index a86399efd4..278bd01d3e 100644
--- a/src/frontend/src/tables/purchasing/PurchaseOrderTable.tsx
+++ b/src/frontend/src/tables/purchasing/PurchaseOrderTable.tsx
@@ -100,7 +100,9 @@ export function PurchaseOrderTable({
 
   const tableColumns = useMemo(() => {
     return [
-      ReferenceColumn({}),
+      ReferenceColumn({
+        switchable: false
+      }),
       DescriptionColumn({}),
       {
         accessor: 'supplier__name',