update

src/App.js

@@ -58,6 +58,7 @@ import UploadFile from "./components/UploadFile";
 import BarChartApex from "./components/BarChartApex";
 import SemiDonut from "./components/SemiDonut";
 import FolderTree from "./components/FolderTree";
+import GridListTable from "./components/GridListTable";
 
 // import Digikala from "./components/Digikala/ImageSlider";
 
@@ -88,7 +89,7 @@ function App() {
         {/* <Toast /> */}
         {/* <ProductSuggestion /> */}
         {/* <ProductImage /> */}
-        <ProductTab />
+        {/* <ProductTab /> */}
         {/* <ProductStatusCard /> */}
         {/* <AdvertisementDesign1 /> */}
         {/* <AdvertisementDesign2 /> */}
@@ -103,7 +104,7 @@ function App() {
         {/* <ReactTable2 /> */}
         {/* <ReactTable3 /> */}
         {/* <ReactTable4 /> */}
-        <ReactTable5 />
+        {/* <ReactTable5 /> */}
         {/* <Digikala /> */}
         {/* <HeaderDesign1 />
         <div className="flex">
@@ -123,8 +124,10 @@ function App() {
         {/* <UploadFile /> */}
         {/* <BarChartApex /> */}
         {/* <SemiDonut /> */}
-        <FolderTree />
+        {/* <FolderTree /> */}
-        <SidebarDesign2 className="w-1/5" />
+        <GridListTable />
+
+        {/* <SidebarDesign2 className="w-1/5" /> */}
       </div>
     </Provider>
   );

src/components/FolderTree/index.js

@@ -10,7 +10,7 @@ const FolderTree = ({ items }) => {
   const [activeDropdown, setActiveDropdown] = useState(null);
 
   return (
-    <div className="bg-white w-72 p-4 mx-auto">
+    <div className="w-fit p-4">
       {items.map((item, index) => (
         <div>
           {/*  level1 */}

src/components/GridListTable/index.js

@@ -0,0 +1,20 @@
+import React from "react";
+import FolderTree from "../FolderTree";
+import ReactTable5 from "../ReactTable5";
+
+const GridListTable = () => {
+  return (
+    <section className="flex flex-row">
+      {/* right */}
+      <div className="w-3/12" style={{ backgroundColor: "#FBFBFB" }}>
+        <FolderTree />
+      </div>
+      {/* left */}
+      <div className="w-9/12">
+        <ReactTable5 />
+      </div>
+    </section>
+  );
+};
+
+export default GridListTable;

src/components/ReactTable5/BasicTable.js

@@ -113,6 +113,10 @@ const BasicTable = ({
     []
   );
 
+  // console.log("mahdi tannaz");
+  // console.log(columns[0]);
+  // console.log("mahdi tannaz");
+
   const defaultColumn = useMemo(() => {
     return {};
   }, []);
@@ -163,7 +167,7 @@ const BasicTable = ({
   const [activeList, setActiveList] = useState(false);
 
   return (
-    <div className="bg-white p-4 rounded">
+    <div className="bg-white p-4">
       {/* {filtering && <section>TANNAZ</section>} */}
       {/* <div className="flex flex-row items-center">
         {listView.map((list, i) => (
@@ -175,39 +179,41 @@ const BasicTable = ({
           />
         ))}
       </div>{" "} */}
-      <div className="mb-3 flex flex-row items-center gap-x-5">
+      <div className="mb-7 flex flex-row items-center justify-between">
         {/* select View list */}
-        <div className="flex flex-row items-center gap-x-2">
+        <div className="flex flex-row items-center gap-x-5">
-          <img
+          <div className="flex flex-row items-center gap-x-2">
-            src={list}
+            <img
-            className="cursor-pointer"
+              src={list}
-            onClick={() => setActiveList(false)}
+              className="cursor-pointer"
-          />
+              onClick={() => setActiveList(false)}
-          <img
+            />
-            src={grid}
+            <img
-            className="cursor-pointer"
+              src={grid}
-            onClick={() => setActiveList(true)}
+              className="cursor-pointer"
+              onClick={() => setActiveList(true)}
+            />
+          </div>
+          {headerGroups.map((headerGroup) =>
+            headerGroup.headers.map((column) =>
+              column.Filter ? (
+                <div className="mt-2 sm:mt-0" key={column.id}>
+                  {column.render("Filter")}
+                </div>
+              ) : null
+            )
+          )}
+          <ButtonNewDesign
+            bgColor={"bg-blue-500"}
+            icon={null}
+            border={"border-0"}
+            borderRadius={"rounded"}
+            fontSize={"text-xs"}
+            padding={"p-2"}
+            text={"انتخاب چند فایل"}
           />
         </div>
-        {headerGroups.map((headerGroup) =>
+        <div className="w-4/12 ">
-          headerGroup.headers.map((column) =>
-            column.Filter ? (
-              <div className="mt-2 sm:mt-0" key={column.id}>
-                {column.render("Filter")}
-              </div>
-            ) : null
-          )
-        )}
-        <ButtonNewDesign
-          bgColor={"bg-blue-500"}
-          icon={null}
-          border={"border-0"}
-          borderRadius={"rounded"}
-          fontSize={"text-xs"}
-          padding={"p-2"}
-          text={"انتخاب چند فایل"}
-        />
-        <div className="flex-1 ">
           <GlobalFilter filter={globalFilter} setFilter={setGlobalFilter} />
         </div>
 
@@ -282,7 +288,7 @@ const BasicTable = ({
       {/* table LIST */}
       {activeTab == 0 ? (
         <>
-          {activeList === false && (
+          {activeList === true && (
             // table
             <table
               {...getTableProps()}
@@ -332,7 +338,7 @@ const BasicTable = ({
                         //
                       >
                         {row.cells.map((cell, index) => {
-                          // console.log(row.cells);
+                          console.log(row.cells);
                           return (
                             <td
                               {...cell.getCellProps({
@@ -370,7 +376,7 @@ const BasicTable = ({
                               addTab={addTab}
                               row={row.original}
                             />
-                            {/* {console.log(row.original)} */}
+                            {console.log(row.original)}
                           </td>
                         </tr>
                       ) : null}
@@ -381,7 +387,7 @@ const BasicTable = ({
             </table>
           )}
           {/* GRID LIST */}
-          {activeList === true && (
+          {activeList === false && (
             <div
               {...getTableBodyProps()}
               className="flex flex-row flex-wrap gap-4 items-center justify-center"
@@ -395,6 +401,8 @@ const BasicTable = ({
                     key={index}
                     style={{ backgroundColor: "#F3F3F3" }}
                   >
+                    {/* {console.log(row.values)} */}
+                    <div className="bg-red-500"> {row.original.Checkbox}</div>
                     <img
                       src={row.original.filePic}
                       alt={row.original.filePic}

src/components/ReactTable5/COLUMNS.js

@@ -7,7 +7,8 @@ import { FileType } from "./FileType";
 
 export const COLUMNS = ({ setFiltering, filtering, addTab }) => [
   {
-    Header: "چک باکس",
+    Header: "checkBox",
+    // accessor: "checkBox",
     accessor: () => Checkbox({ setFiltering, filtering, addTab }),
     className: "w-7",
   },

src/components/ReactTable5/index.js

@@ -32,7 +32,7 @@ const ReactTable5 = ({ breadCrumbs, breadCrumb }) => {
   };
 
   return (
-    <div className="my-10 w-11/12 mx-auto">
+    <div className="w-full">
       {/* breadCrumb */}
       <div className="flex flex-row items-center">
         {breadCrumb &&
@@ -57,7 +57,7 @@ const ReactTable5 = ({ breadCrumbs, breadCrumb }) => {
             </div>
           ))}
       </div>
-      <div className="my-7">
+      <div className="">
         <TitleSubtitle titleShow={false} subTitleShow={false} />
       </div>
       <BasicTable