fix

client/src/shared/components/Export.js

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useRef, useState } from "react";
 import { Dropdown } from "react-bootstrap";
 import { Download } from "react-bootstrap-icons";
 
@@ -7,16 +7,24 @@ const Export = ({ columns, data, filename = "export", customActions = [], show,
   const [exportColumns, setExportColumns] = useState(
     columns.map(col => ({ ...col, show: true }))
   );
+  const scrollContainerRef = useRef(null);
+  const scrollTopRef = useRef(0);
 
   // Use external control if provided, otherwise use internal state
   const showExportDropdown = show !== undefined ? show : internalShow;
   const handleToggle = onToggle || ((isOpen) => setInternalShow(isOpen));
 
   const handleColumnToggle = (columnKey) => {
+    scrollTopRef.current = scrollContainerRef.current?.scrollTop || 0;
     const updatedColumns = exportColumns.map(col => 
       col.key === columnKey ? { ...col, show: !col.show } : col
     );
     setExportColumns(updatedColumns);
+    requestAnimationFrame(() => {
+      if (scrollContainerRef.current) {
+        scrollContainerRef.current.scrollTop = scrollTopRef.current;
+      }
+    });
   };
 
   const handleCancel = () => {
@@ -136,7 +144,7 @@ const Export = ({ columns, data, filename = "export", customActions = [], show,
                     <hr style={{ margin: '8px 0', borderColor: '#ddd' }} />
                   </>
                 )}
-              <div style={{ maxHeight: '200px', overflowY: 'auto', marginBottom: '15px' }}>
+              <div style={{ maxHeight: '200px', overflowY: 'auto', marginBottom: '15px' }} ref={scrollContainerRef}>
                 <h6 style={{ fontSize: '14px', marginBottom: '10px' }}>Select Columns:</h6>
                 {exportColumns.map((column) => (
                   <div key={column.key} style={{ marginBottom: '8px' }}>

client/src/shared/components/ManageTable.js

@@ -1,10 +1,12 @@
-import React, { useState } from "react";
+import React, { useRef, useState } from "react";
 import { Dropdown } from "react-bootstrap";
 import { Columns } from "react-bootstrap-icons";
 
 const ManageTable = ({ columns, onColumnsChange, show, onToggle }) => {
   const [internalShow, setInternalShow] = useState(false);
   const [tempColumns, setTempColumns] = useState(columns);
+  const scrollContainerRef = useRef(null);
+  const scrollTopRef = useRef(0);
   
   // Use external control if provided, otherwise use internal state
   const showManageTableDropdown = show !== undefined ? show : internalShow;
@@ -15,10 +17,16 @@ const ManageTable = ({ columns, onColumnsChange, show, onToggle }) => {
   }, [columns]);
 
   const handleColumnToggle = (columnKey) => {
+    scrollTopRef.current = scrollContainerRef.current?.scrollTop || 0;
     const updatedColumns = tempColumns.map(col => 
       col.key === columnKey ? { ...col, show: !col.show } : col
     );
     setTempColumns(updatedColumns);
+    requestAnimationFrame(() => {
+      if (scrollContainerRef.current) {
+        scrollContainerRef.current.scrollTop = scrollTopRef.current;
+      }
+    });
   };
 
   const handleDone = () => {
@@ -51,7 +59,7 @@ const ManageTable = ({ columns, onColumnsChange, show, onToggle }) => {
           <h6>Manage Table Columns</h6>
           <div className="app-main-content-fields-section margin-sm dropdown-container">
             <div className="manage-table-columns-wrapper">
-              <div className="manage-table-columns-scroll">
+              <div className="manage-table-columns-scroll" ref={scrollContainerRef}>
                 {tempColumns.map((column) => (
                   <div key={column.key} style={{ marginBottom: '8px' }}>
                     <input