update

src/components/ReactTable4/Settings.js

@@ -1,13 +1,40 @@
-import React from "react";
+import React, { useState } from "react";
+import { ToggleColumns } from "./ToggleColumns";
+
 import settings from "./settings.svg";
 
-export const Settings = ({}) => {
+export const Settings = ({ allColumns, getToggleHideAllColumnsProps }) => {
+  const [openModal, setOpenModal] = useState(false);
+  console.log(openModal);
+
   return (
-    <div
-      style={{ backgroundColor: "#F9FBFF" }}
-      className="mr-2 flex flex-col items-center justify-center p-1 rounded"
-    >
-      <img src={settings} className="w-6 h-6 cursor-pointer" />
-    </div>
+    <section>
+      <div
+        onClick={() => setOpenModal(true)}
+        data-modal-toggle="large-modal"
+        style={{ backgroundColor: "#F9FBFF" }}
+        className="mr-2 flex flex-col items-center justify-center p-1 rounded"
+      >
+        <img src={settings} className="w-6 h-6 cursor-pointer" />
+      </div>
+      {/* modal */}
+      <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-90" : "opacity-0 pointer-events-none"}`}
+        onClick={() => setOpenModal(false)}
+      >
+        <div
+          className="absolute bg-white"
+          style={{ top: "10%" }}
+          onClick={(e) => e.stopPropagation()}
+          onClick={() => setOpenModal(false)}
+        >
+          <ToggleColumns
+            allColumns={allColumns}
+            getToggleHideAllColumnsProps={getToggleHideAllColumnsProps}
+          />
+        </div>
+      </div>
+    </section>
   );
 };