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

@@ -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(() => {

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',