update

src/components/ReactTable5/BasicTable.js

@@ -153,8 +153,16 @@ const BasicTable = ({
 
   return (
     <>
-      <img src={list} className="cursor-pointer my-5" />
-      <img src={grid} className="cursor-pointer my-5" />
+      <img
+        src={list}
+        className="cursor-pointer my-5"
+        onClick={() => setActiveList(false)}
+      />
+      <img
+        src={grid}
+        className="cursor-pointer my-5"
+        onClick={() => setActiveList(true)}
+      />
       <div className="flex flex-row items-center justify-between">
         {/* right box */}
         <di className="bg-red-400">
@@ -217,6 +225,7 @@ const BasicTable = ({
           </div>
         ) : null}
       </div>
+
       {/* table LIST */}
       {activeTab == 0 ? (
         <>
@@ -285,7 +294,7 @@ const BasicTable = ({
                       //
                     >
                       {row.cells.map((cell, index) => {
-                        console.log(row.cells);
+                        // console.log(row.cells);
                         return (
                           <td
                             {...cell.getCellProps({
@@ -323,7 +332,7 @@ const BasicTable = ({
                             addTab={addTab}
                             row={row.original}
                           />
-                          {console.log(row.original)}
+                          {/* {console.log(row.original)} */}
                         </td>
                       </tr>
                     ) : null}
@@ -350,21 +359,23 @@ const BasicTable = ({
         />
       )}
       {/* GRID LIST */}
-      <div className="flex flex-row gap-4">
-        {data.map((item, index) => (
-          <div
-            className="flex flex-col px-4 py-5 rounded-md"
-            key={index}
-            style={{ backgroundColor: "#fff" }}
-          >
-            <img src={image1} className="w-52" />
-            <p className="text-sm my-3">{item.fileName}</p>
-            <span className="text-xs text-left text-gray-500">
-              {item.fileSize}
-            </span>
-          </div>
-        ))}
-      </div>
+      {activeList === true && (
+        <div className="flex flex-row gap-4">
+          {data.map((item, index) => (
+            <div
+              className="flex flex-col px-4 py-5 rounded-md"
+              key={index}
+              style={{ backgroundColor: "#fff" }}
+            >
+              <img src={image1} className="w-52" />
+              <p className="text-sm my-3">{item.fileName}</p>
+              <span className="text-xs text-left text-gray-500">
+                {item.fileSize}
+              </span>
+            </div>
+          ))}
+        </div>
+      )}
     </>
   );
 };