Refactor: Make Reset Column button reset columns order

src/frontend/src/components/tableComponent/index.tsx

@@ -1,7 +1,7 @@
 import "ag-grid-community/styles/ag-grid.css"; // Mandatory CSS required by the grid
 import "ag-grid-community/styles/ag-theme-quartz.css"; // Optional Theme applied to the grid
 import { AgGridReact, AgGridReactProps } from "ag-grid-react";
-import { ElementRef, forwardRef, useRef } from "react";
+import { ElementRef, forwardRef, useEffect, useRef } from "react";
 import {
   DEFAULT_TABLE_ALERT_MSG,
   DEFAULT_TABLE_ALERT_TITLE,
@@ -40,6 +40,7 @@ const TableComponent = forwardRef<
     // @ts-ignore
     const realRef = ref?.current ? ref : gridRef;
     const dark = useDarkStore((state) => state.dark);
+    const initialColumnDefs = useRef(props.columnDefs);
 
     const makeLastColumnNonResizable = (columnDefs) => {
       columnDefs.forEach((colDef, index) => {
@@ -55,6 +56,7 @@ const TableComponent = forwardRef<
         ...props.columnDefs,
       ]);
       params.api.setColumnDefs(updatedColumnDefs);
+      initialColumnDefs.current = params.api.getColumnDefs();
       if (props.onGridReady) props.onGridReady(params);
     };
 
@@ -134,7 +136,7 @@ const TableComponent = forwardRef<
           onGridReady={onGridReady}
           onColumnMoved={onColumnMoved}
         />
-        <ResetColumns resetGrid={() => resetGrid(realRef)} />
+        <ResetColumns resetGrid={() => resetGrid(realRef, initialColumnDefs)} />
       </div>
     );
   },

src/frontend/src/components/tableComponent/utils/reset-grid-columns.tsx

@@ -1,5 +1,12 @@
-export default function resetGrid(ref) {
+export default function resetGrid(ref, initialColumnDefs) {
   if (ref?.current && ref?.current.api) {
     ref.current.api.resetColumnState();
+    if (initialColumnDefs.current) {
+      const resetColumns = ref.current.api.applyColumnState({
+        state: initialColumnDefs.current,
+        applyOrder: true,
+      });
+      return resetColumns;
+    }
   }
 }