update

src/App.js

@@ -101,7 +101,7 @@ function App() {
         {/* <TableDesign1 /> */}
         {/* <ReactTable2 /> */}
         {/* <ReactTable3 /> */}
-        {/* <ReactTable4 /> */}
+        <ReactTable4 />
         <ReactTable5 />
         {/* <Digikala /> */}
         {/* <HeaderDesign1 />

src/components/ReactTable5/BasicTable.js

@@ -242,6 +242,7 @@ const BasicTable = ({
       {/* table LIST */}
       {activeTab == 0 ? (
         <>
+          {activeList === false && (
             <table
               {...getTableProps()}
               className="min-w-full divide-y divide-gray-200 mb-5"
@@ -354,23 +355,8 @@ const BasicTable = ({
                 })}
               </tbody>
             </table>
-          {/* bottom table */}
-          <GoToPage
-            pageIndex={pageIndex}
-            gotoPage={gotoPage}
-            pageOptions={pageOptions}
-          />
-          <ShowMoreRows pageSize={pageSize} setPageSize={setPageSize} />
-        </>
-      ) : (
-        <EditRow
-          row={
-            rows.find((e) => e.original && +e.original.id === activeTab)
-              ?.original || {}
-          }
-          columns={defaultColumn}
-        />
           )}
+
           {/* GRID LIST */}
           {activeList === true && (
             <div className="flex flex-row gap-4">
@@ -389,6 +375,23 @@ const BasicTable = ({
               ))}
             </div>
           )}
+          {/* bottom table */}
+          <GoToPage
+            pageIndex={pageIndex}
+            gotoPage={gotoPage}
+            pageOptions={pageOptions}
+          />
+          <ShowMoreRows pageSize={pageSize} setPageSize={setPageSize} />
+        </>
+      ) : (
+        <EditRow
+          row={
+            rows.find((e) => e.original && +e.original.id === activeTab)
+              ?.original || {}
+          }
+          columns={defaultColumn}
+        />
+      )}
     </>
   );
 };