update

src/components/ReactTable3/BasicTable.js

@@ -8,6 +8,7 @@ import {
   usePagination,
   useRowSelect,
   useColumnOrder,
+  useExpanded,
   useResizeColumns
 } from "react-table";
 
@@ -16,7 +17,67 @@ import { GlobalFilter } from "./GlobalFilter";
 import { Checkbox } from "./Checkbox";
 import MOCK_DATA from "./MOCK_DATA.json";
 
+// This is a custom filter UI for selecting
+// a unique option from a list
+export function 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])
+
+  // Render a multi-select box
+  return (
+    <label className="flex gap-x-2 items-baseline">
+      <span className="text-gray-700">{render("Header")}: </span>
+      <select
+        className="rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"
+        name={id}
+        id={id}
+        value={filterValue}
+        onChange={e => {
+          setFilter(e.target.value || undefined)
+        }}
+      >
+        <option value="">همه</option>
+        {options.map((option, i) => (
+          <option key={i} value={option} className="text-xs">
+            {(() => {
+            if (option === 1) {
+              return (
+                 "وضعیت عادی"
+              );
+            }  else if (option === 2) {
+              return (
+                "اعلان سطح هشدار"
+             );
+            } else if (option === 3) {
+              return (
+                "بررسی و پیگیری"
+             );
+            } else if (option === 4) {
+              return (
+                "وضعیت بحرانی"
+             );
+            } else {
+              return (
+                " وضعیت پایدار"
+              );
+            }
+            })()}{" "}
+
+          </option>
+        ))}
+        
+      </select>
+    </label>
+  )
+}
 
 const BasicTable = () => {
   const columns = React.useMemo(() => COLUMNS, []);
@@ -58,6 +119,7 @@ const BasicTable = () => {
     useFilters,
     useGlobalFilter,
     useSortBy,
+    useExpanded,
     usePagination,
     useRowSelect,
     (hooks) => {
@@ -94,6 +156,15 @@ const BasicTable = () => {
   console.log(rows.length);
   return (
     <>
+    {headerGroups.map((headerGroup) =>
+          headerGroup.headers.map((column) =>
+            column.Filter ? (
+              <div className="mt-2 sm:mt-0" key={column.id}>
+                {column.render("Filter")}
+              </div>
+            ) : null
+          )
+        )}
       <div className="flex flex-row items-center justify-between mb-3 mx-4">
       {/*  search box */}
       <GlobalFilter filter={globalFilter} setFilter={setGlobalFilter} />
@@ -105,7 +176,7 @@ const BasicTable = () => {
           {/* go to page */}
           <div>
             <input
-              className="ml-1 text-xs p-1"
+              className="ml-1 text-xs p-1 rounded border-blue-400"
               type="number"
               defaultValue={pageIndex + 1}
               onChange={(e) => {
@@ -157,6 +228,7 @@ const BasicTable = () => {
             {">>"}
           </button>
       </div>
+
       </div>
       {/*  */}
       {/* toggle columns */}
@@ -198,7 +270,6 @@ const BasicTable = () => {
                       : ""}
                   </span>
                 </th>
-                
               ))}
             </tr>
           ))}

src/components/ReactTable3/Buttons.js

@@ -9,7 +9,7 @@ import { useState } from 'react';
 export function Buttons({  }) {
   const [activeDetails, setActiveDetails] = useState(null);
     return (
-      <div className="flex flex-row items-center">
+      <div className="flex flex-row items-center justify-end">
           <button 
             className="flex flex-row items-center justify-around  p-2 rounded border border-gray-300 mx-1"
             onClick={ () => setActiveDetails(!activeDetails) }>

src/components/ReactTable3/EditButtons.js

@@ -3,39 +3,69 @@ import React, {useState} from 'react';
 import search from './search-normal.svg';
 import filter from './filter.svg';
 import settings from './settings.svg';
+import arrow from './blue-arrow.svg';
 import plus from './plus.svg';
 
-export function EditButtons() {
+export function EditButtons({buttons}) {
-  const [openModal, setOpenModal] = useState(false);
+  // const [openModal, setOpenModal] = useState(false);
 
     return (
       <div className="flex flex-row items-center">
         {/* serach box */}
-        <div className="border border-blue-400 flex flex-col items-center justify-center p-1 rounded-sm bg-blue-200 bg-opacity-30 mx-1"
+        {buttons.map((button,index) =>(
-          onClick={() => setOpenModal(true)}  
+        <div className={`border border-blue-400 flex flex-row items-center justify-around p-1 rounded-sm bg-opacity-30 mx-1`}
+            style={{backgroundColor: button.backgroundColor}}
+          // onClick={() => setOpenModal(true)}  
         >
-          <img src={search} alt="" className="w-6 cursor-pointer" onClick={() => setOpenModal(true)} />
+          <p className={`text-sm ${button.textColor}`}>{button.title}</p>
+          <img src={button.logo} alt="" className={`cursor-pointer ${button.width} ${button.height} ${button.title === null ? "mr-0": "mx-2"}`} />
         </div>
-        {/* filter */}
+        ))}
-        <div className="border border-blue-400 flex flex-col items-center justify-center p-1 rounded-sm bg-blue-200 bg-opacity-30 mx-1"
-        >
-          <img src={filter} alt="" className="w-6 h-6 cursor-pointer" onClick={() => setOpenModal(true)} />
-        </div>
-        <div className="border border-blue-400 flex flex-col items-center justify-center p-1 rounded-sm bg-blue-200 bg-opacity-30 mx-1"
-        >
-          <img src={settings} alt="" className="w-6 cursor-pointer" onClick={() => setOpenModal(true)} />
-        </div>
-        {/* <button></button> */}
       </div>
     );
   }
 
-  
+EditButtons.defaultProps = {
-
+  buttons : [
-//   <div
+    {
-//   className={`cursor-pointer w-screen h-screen backdrop-filter backdrop-blur-lg flex items-center justify-center bg-gray-900 fixed left-0 top-0 duration-1000  transition-all
+      logo: search,
-//     ${openModal ? "opacity-80" : "opacity-10 pointer-events-none"}
+      width: "w-5",
-//   `}
+      height: "h-5",
-//   onClick={() => setOpenModal(false)}
+      title: null,
-// >
+      textColor: null,
-// </div>
+      backgroundColor: "#F3F8FF",
+    },
+    {
+      logo: filter,
+      width: "w-5",
+      height: "h-5",
+      title: null,
+      textColor: null,
+      backgroundColor: "#F3F8FF",
+    },
+    {
+      logo: settings,
+      width: "w-5",
+      height: "h-5",
+      title: null,
+      textColor: null,
+      backgroundColor: "#F3F8FF",
+    },
+    {
+      logo: arrow,
+      width: "w-3",
+      height: "h-3",
+      title: 'عملیات',
+      textColor: "text-blue-400",
+      backgroundColor: "#F3F8FF",
+    },
+    {
+      logo: plus,
+      width: "w-3",
+      height: "h-3",
+      title: 'ثبت جدید',
+      textColor: "text-white",
+      backgroundColor: "#65A9FF",
+    },
+  ]
+}

src/components/ReactTable3/blue-arrow.svg

@@ -0,0 +1,4 @@
+<svg id="arrow-down" xmlns="http://www.w3.org/2000/svg" width="16.237" height="16.237" viewBox="0 0 16.237 16.237">
+  <path id="Vector" d="M10.716,0,6.305,4.411a1.343,1.343,0,0,1-1.894,0L0,0" transform="translate(2.76 6.055)" fill="none" stroke="#65a9ff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
+  <path id="Vector-2" data-name="Vector" d="M0,0H16.237V16.237H0Z" transform="translate(16.237 16.237) rotate(180)" fill="none" opacity="0"/>
+</svg>

src/components/ReactTable3/columns.js

@@ -1,15 +1,16 @@
 import { format } from "date-fns";
 
-import Table, {  } from "./BasicTable"; // new
+import Table, { SelectColumnFilter } from "./BasicTable"; // new
 
 import { ColumnFilter } from "./ColumnFilter";
 
 import { OrderStatus } from "./OrderStatus";
 import { OrderLevel } from "./OrderLevel";
 import { Buttons } from "./Buttons";
-import { EditButtons } from "./EditButtons";
+import  {EditButtons}  from "./EditButtons";
 
 export const COLUMNS = [
+  
   {
     Header: "نام و نام خانوادگی",
     Footer: "نام و نام خانوادگی",
@@ -51,6 +52,8 @@ export const COLUMNS = [
     Footer: "سطح اهمیت",
     accessor: "order-level",
     Cell: OrderLevel,
+    Filter: SelectColumnFilter, 
+    // new
   },
   {
     Header: EditButtons,

src/components/ReactTable3/plus.svg

@@ -1,3 +1,6 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="2" height="11.72" viewBox="0 0 2 11.72">
+<svg xmlns="http://www.w3.org/2000/svg" width="11.72" height="11.72" viewBox="0 0 11.72 11.72">
-  <path id="Vector" d="M0,9.72V0" transform="translate(1 1)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+  <g id="Group_1916" data-name="Group 1916" transform="translate(-34.5 -316.547)">
+    <path id="Vector" d="M0,0H9.72" transform="translate(35.5 322.407)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+    <path id="Vector-2" data-name="Vector" d="M0,9.72V0" transform="translate(40.36 317.547)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+  </g>
 </svg>