Fix order of hooks for stabilizing table columns (#11482) (#11622)

* Fix order of hooks for stabilizing table columns

Ref: https://github.com/icflorescu/mantine-datatable/issues/759

* Reset column ordering and widths when the component is mounted

---------


(cherry picked from commit 571b46c9ff)

Co-authored-by: Oliver <oliver.henry.walters@gmail.com>
Co-authored-by: Matthias Mair <code@mjmair.com>

src/frontend/src/tables/InvenTreeTable.tsx

@@ -303,9 +303,6 @@ export function InvenTreeTable<T extends Record<string, any>>({
       });
     }
 
-    const columnNames: string = cols.map((col) => col.accessor).join(',');
-    setColumnHash(hashString(columnNames));
-
     return cols;
   }, [
     columns,
@@ -315,6 +312,13 @@ export function InvenTreeTable<T extends Record<string, any>>({
     tableState.selectedRecords
   ]);
 
+  useEffect(() => {
+    const columnNames: string = dataColumns
+      .map((col: any) => col.accessor)
+      .join(',');
+    setColumnHash(hashString(columnNames));
+  }, [dataColumns]);
+
   // Callback when column visibility is toggled
   const toggleColumn = useCallback(
     (columnName: string) => {
@@ -343,6 +347,13 @@ export function InvenTreeTable<T extends Record<string, any>>({
     getInitialValueInEffect: false
   });
 
+  // Reset column ordering and custom widths when the component is mounted
+  // Ref: https://github.com/icflorescu/mantine-datatable/issues/759#issuecomment-4148942070
+  useEffect(() => {
+    tableColumns.resetColumnsOrder();
+    tableColumns.resetColumnsWidth();
+  }, []);
+
   // Reset the pagination state when the search term changes
   useEffect(() => {
     tableState.setPage(1);