rows expanded on pagination

avantifellows · Mar 7, 2024 · a9d950b · a9d950b
1 parent f54880d
commit a9d950b
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 4 deletions.
diff --git a/src/components/displayTable/DataDisplay.tsx b/src/components/displayTable/DataDisplay.tsx
@@ -2,6 +2,7 @@ import TableRow from "./Row";
 import ReactPaginate from "react-paginate";
 import { DbTypes } from "@/types/ResponseTypes";
 import { useRouter } from "next/router";
+import { useEffect, useState } from "react";
 
 const DataDisplay = ({
   data,
@@ -13,6 +14,11 @@ const DataDisplay = ({
   currentPage: number;
 }) => {
   const router = useRouter();
+  const [expandedRow, setExpandedRow] = useState<number | null>(null);
+
+  useEffect(() => {
+    setExpandedRow(null);
+  }, [currentPage]);
 
   return (
     <div className="inline-block min-w-full py-2 sm:px-6 lg:px-8">
@@ -40,6 +46,10 @@ const DataDisplay = ({
                 key={i}
                 currentPage={currentPage}
                 itemsPerPage={10}
+                isExpanded={i === expandedRow}
+                toggleExpand={() =>
+                  setExpandedRow(expandedRow === i ? null : i)
+                }
               />
             ))}
           </tbody>

diff --git a/src/components/displayTable/Row.tsx b/src/components/displayTable/Row.tsx
@@ -9,13 +9,16 @@ const TableRow = ({
   index,
   currentPage,
   itemsPerPage,
+  isExpanded,
+  toggleExpand,
 }: {
   row: DbTypes;
   index: number;
   currentPage: number;
   itemsPerPage: number;
+  isExpanded: boolean;
+  toggleExpand: () => void;
 }) => {
-  const [isExpand, setIsExpand] = useState<boolean>(false);
   const {
     meta_data,
     start_time,
@@ -60,7 +63,7 @@ const TableRow = ({
         className={`${
           hasNoreportlink && `text-gray-400`
         } hover:bg-gray-50 border-none text-center`}
-        onClick={() => setIsExpand(!isExpand)}
+        onClick={() => toggleExpand()}
       >
         <td className="border-b border-black p-2">{actualIndex}</td>
         <td className="border-b border-black p-2">{batch}</td>
@@ -100,7 +103,7 @@ const TableRow = ({
         <td className="border-b border-black flex-wrap">
           <Copy className="cursor-pointer float-left" />
           <Edit
-            className="cursor-pointer"
+            className="cursor-pointer float-right"
             onClick={(e) => {
               router.push(`/Session?type=edit&sessionId=${id}`);
               e.stopPropagation();
@@ -110,7 +113,7 @@ const TableRow = ({
       </tr>
 
       {/* Collapsible Container */}
-      {isExpand && (
+      {isExpanded && (
         <tr className="bg-slate-100 text-[#3F3F3F]">
           <td colSpan={10}>
             <table style={{ width: "100%" }}>