diff --git a/client/src/shared/components/Export.js b/client/src/shared/components/Export.js
index 0985595..d4ff4d6 100644
--- a/client/src/shared/components/Export.js
+++ b/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,
>
)}
-
+
Select Columns:
{exportColumns.map((column) => (
diff --git a/client/src/shared/components/ManageTable.js b/client/src/shared/components/ManageTable.js
index 53a99e0..b5c3c0b 100644
--- a/client/src/shared/components/ManageTable.js
+++ b/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 }) => {
Manage Table Columns