update

src/App.js

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

src/components/ButtonNewDesign/index.js

@@ -14,12 +14,13 @@ const ButtonNewDesign = ({
   padding,
   icon,
   buttonIcon,
+  text,
 }) => {
   return (
     <button
       className={`w-fit h-fit flex items-center transiton duration-200 hover:bg-opacity-70 ${bgColor} ${bgHoverColor} ${textColor} ${border} ${borderColor} ${borderRadius} ${fontSize} ${padding}`}
     >
-      اطلاعات بیشتر
+      {text}
       {icon && (
         <span className={`rounded-full mr-2 ${iconBgColor} `}>
           <img src={buttonIcon} alt="" className="w-full" />
@@ -44,4 +45,6 @@ ButtonNewDesign.defaultProps = {
   // icons
   icon: true,
   buttonIcon: arrow,
+
+  text: "اطلاعات بیشتر",
 };

src/components/ReactTable5/BasicTable.js

@@ -5,7 +5,6 @@ import Tabbar from "./Tabbar";
 
 import MOCK_DATA2 from "./MOCK_DATA2.json";
 
-import { ColumnSearch } from "./ColumnSearch";
 import { GlobalFilter } from "./GlobalFilter";
 
 import { COLUMNS } from "./COLUMNS";
@@ -14,6 +13,7 @@ import { GoToPage } from "./GoToPage";
 import ShowMoreRows from "./ShowMoreRows";
 import { Settings } from "./Settings";
 import { Checkbox } from "./Checkbox";
+import { FilterFileType } from "./FilterFileType";
 
 import grid from "./grid.svg";
 import list from "./list.svg";
@@ -32,16 +32,75 @@ import {
   useColumnOrder,
   useExpanded,
 } from "react-table";
+import ButtonNewDesign from "../ButtonNewDesign";
 
 export function CheckBox({}) {
   return <input type="checkbox" className="cursor-pointer" />;
 }
 
+export const SelectColumnFilter = ({
+  column: { filterValue, setFilter, preFilteredRows, id, render },
+}) => {
+  const options = React.useMemo(() => {
+    const options = new Set();
+    preFilteredRows.forEach((row) => {
+      options.add(row.values[id]);
+    });
+    return [...options.values()];
+  }, [id, preFilteredRows]);
+
+  return (
+    <select
+      className="w-32 appearance-none text-xs  flex flex-row items-start p-2 rounded focus:outline-none border focus:border-gray-200 focus:ring focus:ring-gray-200 focus:ring-opacity-20"
+      style={{ borderColor: "#EEEEEE", color: "#00253A" }}
+      name={id}
+      id={id}
+      value={filterValue}
+      onChange={(e) => {
+        setFilter(e.target.value || undefined);
+      }}
+    >
+      <option
+        className="text-white"
+        value=""
+        style={{ backgroundColor: "#65A9FF" }}
+      >
+        بر اساس نوع فایل
+      </option>
+      {options.map((option, i) => (
+        <option
+          key={i}
+          value={option}
+          className="text-right text-white px-2"
+          style={{ backgroundColor: "#65A9FF" }}
+        >
+          {(() => {
+            if (option === 1) {
+              return "JPG";
+            } else if (option === 2) {
+              return "PNG";
+            } else if (option === 3) {
+              return "PDF";
+            } else if (option === 4) {
+              return "CSV";
+            } else if (option === 5) {
+              return "PPT";
+            } else {
+              return "MP4";
+            }
+          })()}{" "}
+        </option>
+      ))}
+    </select>
+  );
+};
+
 const BasicTable = ({
   settingsIcon,
   thead,
   goToPage,
   showMore,
+  filterBarDefault,
   addTab,
   tabs,
   delTab,
@@ -85,14 +144,8 @@ const BasicTable = ({
     []
   );
 
-  // const defaultColumn = {
-  //   Cell: EditableCell,
-  // };
-  // یعنی فیلتر دیفالت هدر های ما سرچ خواهد بود مگه اینکه خودمون تغییرش بدیم
   const defaultColumn = useMemo(() => {
-    return {
+    return {};
-      Filter: ColumnSearch,
-    };
   }, []);
 
   //   اگر بخواهیم ردیف های جدولمون یکی در میان زنگ پس زمینه اشون با هم فرق کند
@@ -169,7 +222,7 @@ const BasicTable = ({
           />
         ))}
       </div>{" "} */}
-      <div>
+      <div className="mb-3 flex flex-row items-center gap-x-5">
         {/* select View list */}
         <div className="flex flex-row items-center gap-x-2">
           <img
@@ -183,10 +236,34 @@ const BasicTable = ({
             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 className="flex-1 ">
+          <GlobalFilter filter={globalFilter} setFilter={setGlobalFilter} />
+        </div>
+
+        {/* <FilterFileType /> */}
       </div>
+      {filterBarDefault && (
         <div className="flex flex-row items-center justify-between">
           {/* right box */}
-        <di className="bg-red-400">
+          <di className="">
             <Tabbar
               tabs={tabs}
               delTab={delTab}
@@ -246,13 +323,13 @@ const BasicTable = ({
             </div>
           ) : null}
         </div>
-
+      )}
-      {activeList === true ? <div>listView</div> : <div>gridView</div>}
+      {/* {activeList === true ? <div>listView</div> : <div>gridView</div>} */}
 
       {/* table LIST */}
       {activeTab == 0 ? (
         <>
-          {activeList === false && (
+          {activeList === true && (
             // table
             <table
               {...getTableProps()}
@@ -368,21 +445,32 @@ const BasicTable = ({
             </table>
           )}
           {/* GRID LIST */}
-          {activeList === true && (
+          {activeList === false && (
-            <div className="flex flex-row gap-4">
-              {data.map((item, index) => (
             <div
+              {...getTableBodyProps()}
+              className="flex flex-row flex-wrap gap-4 items-center justify-center"
+            >
+              {rows.map((row, index) => {
+                prepareRow(row);
+                return (
+                  <div
+                    {...row.getRowProps()}
                     className="flex flex-col px-4 py-5 rounded-md"
                     key={index}
                     style={{ backgroundColor: "#F3F3F3" }}
                   >
-                  <img src={image1} className="w-52" />
+                    <img
-                  <p className="text-sm my-3">{item.fileName}</p>
+                      src={row.original.filePic}
+                      alt={row.original.filePic}
+                      className="w-52"
+                    />
+                    <p className="text-sm my-3">{row.original.fileName}</p>
                     <span className="text-xs text-left text-gray-500">
-                    {item.fileSize}
+                      {row.original.fileSize}
                     </span>
                   </div>
-              ))}
+                );
+              })}
             </div>
           )}
           {/* bottom table */}
@@ -418,6 +506,7 @@ BasicTable.defaultProps = {
   thead: false,
   goToPage: false,
   showMore: false,
+  filterBarDefault: false,
 
   // listView: [
   //   { icon: grid, click: () => setActiveList(false) },

src/components/ReactTable5/COLUMNS.js

@@ -1,20 +1,17 @@
 import { format } from "date-fns";
 
-import BasicTable, { CheckBox } from "../ReactTable5/BasicTable";
+import BasicTable, {
+  CheckBox,
+  SelectColumnFilter,
+} from "../ReactTable5/BasicTable";
 
-import { OrderStatus } from "./OrderStatus";
+import { FileType } from "./FileType";
-import { OrderLevel } from "./OrderLevel";
-import { Buttons } from "./Buttons";
-import { EditButtons } from "./EditButtons";
-import { SelectColumnFilter } from "./SelectColumnFilter.js";
-import { SelectColumnFilter2 } from "./SelectColumnFilter2.js";
-import { SliderColumnFilter } from "./SliderColumnFilter.js";
 
 export const COLUMNS = ({ setFiltering, filtering, addTab }) => [
   {
     Header: "چک باکس",
     accessor: CheckBox,
-    className: "bg-red-100 w-7",
+    className: "w-7",
   },
   {
     Header: "ایکن فایل",
@@ -30,6 +27,8 @@ export const COLUMNS = ({ setFiltering, filtering, addTab }) => [
   {
     Header: "نوع فایل",
     accessor: "fileType",
+    Cell: FileType,
+    Filter: SelectColumnFilter, // new
     // className: "bg-red-500 ",
   },
   {

src/components/ReactTable5/FileType.js

@@ -0,0 +1,26 @@
+export function FileType({ value }) {
+  return (
+    <div className="">
+      {(() => {
+        switch (value) {
+          case 1:
+            return <span>JPG</span>;
+          case 2:
+            return <span>PNG</span>;
+
+          case 3:
+            return <span>PDF</span>;
+
+          case 4:
+            return <span>CSV</span>;
+
+          case 5:
+            return <span>PPT</span>;
+
+          default:
+            return <span>MP4</span>;
+        }
+      })()}
+    </div>
+  );
+}

src/components/ReactTable5/FilterFileType.js

@@ -0,0 +1,58 @@
+import React from "react";
+
+export const FilterFileType = ({
+  column: { filterValue, setFilter, preFilteredRows, id, render },
+}) => {
+  const options = React.useMemo(() => {
+    const options = new Set();
+    preFilteredRows.forEach((row) => {
+      options.add(row.values[id]);
+    });
+    return [...options.values()];
+  }, [id, preFilteredRows]);
+
+  return (
+    <select
+      className="text-xs flex flex-row items-start justify-start p-1 text-blue-400 rounded focus:outline-none border focus:border-blue-200 focus:ring focus:ring-blue-200 focus:ring-opacity-20"
+      style={{ backgroundColor: "#F9FBFF", borderColor: "#B5D6FF" }}
+      name={id}
+      id={id}
+      value={filterValue}
+      onChange={(e) => {
+        setFilter(e.target.value || undefined);
+      }}
+    >
+      <option
+        className="text-white"
+        value=""
+        style={{ backgroundColor: "#65A9FF" }}
+      >
+        همه
+      </option>
+      {options.map((option, i) => (
+        <option
+          key={i}
+          value={option}
+          className="text-right text-white px-2"
+          style={{ backgroundColor: "#65A9FF" }}
+        >
+          {(() => {
+            if (option === 1) {
+              return "JPG";
+            } else if (option === 2) {
+              return "PNG";
+            } else if (option === 3) {
+              return "PDF";
+            } else if (option === 4) {
+              return "CSV";
+            } else if (option === 5) {
+              return "PPT";
+            } else {
+              return "MP4";
+            }
+          })()}{" "}
+        </option>
+      ))}
+    </select>
+  );
+};

src/components/ReactTable5/GlobalFilter.js

@@ -14,7 +14,7 @@ export const GlobalFilter = ({ filter, setFilter }) => {
   }, 400);
 
   return (
-    <div className="flex flex-row-reverse items-center relative ml-2 ">
+    <div className="flex flex-row-reverse items-center relative ml-2 w-full">
       {activeSearchBox && (
         <img
           src={cancleIcon}
@@ -34,7 +34,7 @@ export const GlobalFilter = ({ filter, setFilter }) => {
         onFocus={() => setActiveSearchBox(true)}
         // onBlur={() => setActiveSearchBox(false)}
         type="text"
-        className={`text-xs text-blue-400 rounded focus:outline-none border focus:border-blue-200 focus:ring focus:ring-blue-200 focus:ring-opacity-20`}
+        className={`w-full text-xs text-blue-400 rounded focus:outline-none border focus:border-blue-200 focus:ring focus:ring-blue-200 focus:ring-opacity-20`}
         style={{ backgroundColor: "#F9FBFF", borderColor: "#B5D6FF" }}
       />
     </div>

src/components/ReactTable5/MOCK_DATA2.json

@@ -2,55 +2,81 @@
   {
     "id": 1,
     "filePic": "picture",
-    "url": "https://news.varzeshe3.com/pictures/2022/03/07/C/lb3arvp4.jpg?w=315",
     "fileName": "تهران شهری برای آیندگان",
-    "fileType": "JPG",
+    "fileType": 1,
     "fileSize": "23.5KB",
     "fileDate": "1400/02/12"
   },
   {
     "id": 2,
     "filePic": "picture",
-    "url": "https://news.varzeshe3.com/pictures/2022/03/07/C/lb3arvp4.jpg?w=315",
     "fileName": "عکس سال 99 نوروز",
-    "fileType": "JPG",
+    "fileType": 2,
     "fileSize": "69.5KB",
     "fileDate": "1400/02/10"
   },
   {
     "id": 3,
     "filePic": "picture",
-    "url": "https://news.varzeshe3.com/pictures/2022/03/07/C/lb3arvp4.jpg?w=315",
     "fileName": "دری به سوی بی نهایت",
-    "fileType": "JPG",
+    "fileType": 3,
     "fileSize": "1.5MB",
     "fileDate": "1400/04/24"
   },
   {
     "id": 4,
     "filePic": "picture",
-    "url": "https://news.varzeshe3.com/pictures/2022/03/07/C/lb3arvp4.jpg?w=315",
     "fileName": "فایل اکسل دانش آموزان",
-    "fileType": "JPG",
+    "fileType": 4,
     "fileSize": "20MB",
     "fileDate": "1397/04/20"
   },
   {
     "id": 5,
     "filePic": "picture",
-    "url": "https://news.varzeshe3.com/pictures/2022/03/07/C/lb3arvp4.jpg?w=315",
     "fileName": "صحرای بدون شن",
-    "fileType": "JPG",
+    "fileType": 5,
     "fileSize": "150MB",
     "fileDate": "1399/04/20"
   },
   {
     "id": 6,
     "filePic": "picture",
-    "url": "https://news.varzeshe3.com/pictures/2022/03/07/C/lb3arvp4.jpg?w=315",
     "fileName": "فایل ایلاستریتور موارد اصلاحی طرح",
-    "fileType": "JPG",
+    "fileType": 6,
     "fileSize": "150MB",
     "fileDate": "1393/10/20"
+  },
+  {
+    "id": 7,
+    "filePic": "picture",
+    "fileName": "تهران شهری برای آیندگان",
+    "fileType": 1,
+    "fileSize": "23.5KB",
+    "fileDate": "1400/02/12"
+  },
+  {
+    "id": 8,
+    "filePic": "picture",
+    "fileName": "عکس سال 99 نوروز",
+    "fileType": 2,
+    "fileSize": "69.5KB",
+    "fileDate": "1400/02/10"
+  },
+  {
+    "id": 9,
+    "filePic": "picture",
+    "fileName": "دری به سوی بی نهایت",
+    "fileType": 3,
+    "fileSize": "1.5MB",
+    "fileDate": "1400/04/24"
+  },
+  {
+    "id": 10,
+    "filePic": "picture",
+    "fileName": "فایل اکسل دانش آموزان",
+    "fileType": 4,
+    "fileSize": "20MB",
+    "fileDate": "1397/04/20"
   }
 ]