update

src/components/ReactTable3/EditButtons.js

@@ -5,9 +5,10 @@ import filter from './filter.svg';
 import settings from './settings.svg';
 import arrow from './blue-arrow.svg';
 import plus from './plus.svg';
+import { GlobalFilter } from './GlobalFilter';
 
-export function EditButtons({buttons}) {
-  // const [openModal, setOpenModal] = useState(false);
+export function EditButtons({buttons }) {
+  const [openModal, setOpenModal] = useState(false);
 
     return (
       <div className="flex flex-row items-center justify-end">
@@ -15,12 +16,27 @@ export function EditButtons({buttons}) {
         {buttons.map((button,index) =>(
         <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)}  
+          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>
         ))}
+      {/* <GlobalFilter filterr={filter} setFilterr={setFilter}/> */}
+      <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
+          ${openModal ? "opacity-80" : "opacity-0 pointer-events-none"}
+        `}
+        onClick={() => setOpenModal(false)}
+      >
+              {/* <GlobalFilter filter={globalFilter} setFilter={setGlobalFilter} /> */}
+              <div className="absolute "
+                style={{top: "20%"}}
+                onClick={(e) => e.stopPropagation()}
+>              <GlobalFilter />
+              </div>
+
+      </div>
       </div>
     );
   }