grid list started

src/components/ReactTable5/BasicTable.js

@@ -15,6 +15,9 @@ import ShowMoreRows from "./ShowMoreRows";
 import { Settings } from "./Settings";
 import { Checkbox } from "./Checkbox";
 
+import grid from "./grid.svg";
+import list from "./list.svg";
+
 import RenderRowSubComponent from "./RenderRowSubComponent";
 import EditRow from "./EditRow";
 
@@ -147,6 +150,8 @@ const BasicTable = ({
 
   return (
     <>
+      <img src={list} className="cursor-pointer my-5" />
+      <img src={grid} className="cursor-pointer my-5" />
       <div className="flex flex-row items-center justify-between">
         {/* right box */}
         <di className="bg-red-400">
@@ -209,7 +214,7 @@ const BasicTable = ({
           </div>
         ) : null}
       </div>
-      {/* table */}
+      {/* table LIST */}
       {activeTab == 0 ? (
         <>
           <table
@@ -341,6 +346,14 @@ const BasicTable = ({
           columns={defaultColumn}
         />
       )}
+      {/* GRID LIST */}
+      <div>
+        <div>
+          {data.map((item, index) => (
+            <p>{item.fileName}</p>
+          ))}
+        </div>
+      </div>
     </>
   );
 };

src/components/ReactTable5/grid.svg

@@ -0,0 +1,7 @@
+<svg id="element-3" xmlns="http://www.w3.org/2000/svg" width="34.696" height="34.696" viewBox="0 0 34.696 34.696">
+  <path id="Vector" d="M12.288,9.426V2.862C12.288.824,11.363,0,9.064,0H3.224C.925,0,0,.824,0,2.862V9.411c0,2.053.925,2.862,3.224,2.862h5.84C11.363,12.288,12.288,11.464,12.288,9.426Z" transform="translate(19.516 2.891)" fill="#65a9ff"/>
+  <path id="Vector-2" data-name="Vector" d="M12.288,9.064V3.224C12.288.925,11.363,0,9.064,0H3.224C.925,0,0,.925,0,3.224v5.84c0,2.3.925,3.224,3.224,3.224h5.84C11.363,12.288,12.288,11.363,12.288,9.064Z" transform="translate(19.516 19.516)" fill="#65a9ff"/>
+  <path id="Vector-3" data-name="Vector" d="M12.288,9.426V2.862C12.288.824,11.363,0,9.064,0H3.224C.925,0,0,.824,0,2.862V9.411c0,2.053.925,2.862,3.224,2.862h5.84C11.363,12.288,12.288,11.464,12.288,9.426Z" transform="translate(2.891 2.891)" fill="#65a9ff"/>
+  <path id="Vector-4" data-name="Vector" d="M12.288,9.064V3.224C12.288.925,11.363,0,9.064,0H3.224C.925,0,0,.925,0,3.224v5.84c0,2.3.925,3.224,3.224,3.224h5.84C11.363,12.288,12.288,11.363,12.288,9.064Z" transform="translate(2.891 19.516)" fill="#65a9ff"/>
+  <path id="Vector-5" data-name="Vector" d="M0,0H34.7V34.7H0Z" transform="translate(34.696 34.696) rotate(180)" fill="none" opacity="0"/>
+</svg>

src/components/ReactTable5/list.svg

@@ -0,0 +1,44 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="29" height="29" viewBox="0 0 29 29">
+  <g id="Group_2044" data-name="Group 2044" transform="translate(-1398 -103)">
+    <g id="Group_2043" data-name="Group 2043" transform="translate(1398.343 103)">
+      <g id="Rectangle_784" data-name="Rectangle 784" transform="translate(-0.343)" fill="none" stroke="#65a9ff" stroke-width="1">
+        <rect width="23" height="5" rx="1" stroke="none"/>
+        <rect x="0.5" y="0.5" width="22" height="4" rx="0.5" fill="none"/>
+      </g>
+      <g id="Rectangle_785" data-name="Rectangle 785" transform="translate(23.657)" fill="none" stroke="#65a9ff" stroke-width="1">
+        <rect width="5" height="5" rx="1" stroke="none"/>
+        <rect x="0.5" y="0.5" width="4" height="4" rx="0.5" fill="none"/>
+      </g>
+    </g>
+    <g id="Group_2042" data-name="Group 2042" transform="translate(1398.343 111)">
+      <g id="Rectangle_787" data-name="Rectangle 787" transform="translate(-0.343)" fill="none" stroke="#65a9ff" stroke-width="1">
+        <rect width="23" height="5" rx="1" stroke="none"/>
+        <rect x="0.5" y="0.5" width="22" height="4" rx="0.5" fill="none"/>
+      </g>
+      <g id="Rectangle_786" data-name="Rectangle 786" transform="translate(23.657)" fill="none" stroke="#65a9ff" stroke-width="1">
+        <rect width="5" height="5" rx="1" stroke="none"/>
+        <rect x="0.5" y="0.5" width="4" height="4" rx="0.5" fill="none"/>
+      </g>
+    </g>
+    <g id="Group_2041" data-name="Group 2041" transform="translate(1398.343 119)">
+      <g id="Rectangle_789" data-name="Rectangle 789" transform="translate(-0.343)" fill="none" stroke="#65a9ff" stroke-width="1">
+        <rect width="23" height="5" rx="1" stroke="none"/>
+        <rect x="0.5" y="0.5" width="22" height="4" rx="0.5" fill="none"/>
+      </g>
+      <g id="Rectangle_788" data-name="Rectangle 788" transform="translate(23.657)" fill="none" stroke="#65a9ff" stroke-width="1">
+        <rect width="5" height="5" rx="1" stroke="none"/>
+        <rect x="0.5" y="0.5" width="4" height="4" rx="0.5" fill="none"/>
+      </g>
+    </g>
+    <g id="Group_2040" data-name="Group 2040" transform="translate(1398.343 127)">
+      <g id="Rectangle_791" data-name="Rectangle 791" transform="translate(-0.343)" fill="none" stroke="#65a9ff" stroke-width="1">
+        <rect width="23" height="5" rx="1" stroke="none"/>
+        <rect x="0.5" y="0.5" width="22" height="4" rx="0.5" fill="none"/>
+      </g>
+      <g id="Rectangle_790" data-name="Rectangle 790" transform="translate(23.657)" fill="none" stroke="#65a9ff" stroke-width="1">
+        <rect width="5" height="5" rx="1" stroke="none"/>
+        <rect x="0.5" y="0.5" width="4" height="4" rx="0.5" fill="none"/>
+      </g>
+    </g>
+  </g>
+</svg>