template to create settings button!

Author: RafaelGB

src/components/HeaderMenu.tsx

@@ -14,6 +14,7 @@ import TrashIcon from "components/img/Trash";
 import TextIcon from "components/img/Text";
 import MultiIcon from "components/img/Multi";
 import HashIcon from "components/img/Hash";
+import AdjustmentsIcon from "components/img/AdjustmentsIcon";
 import React, { useContext, useEffect, useState } from "react";
 import { ActionType } from "react-table";
 import { usePopper } from "react-popper";
@@ -56,11 +57,16 @@ const HeaderMenu = (headerMenuProps: HeaderMenuProps) => {
     placement: "bottom",
     strategy: "absolute",
   });
+  // Manage type of data
   const [typeReferenceElement, setTypeReferenceElement] = useState(null);
   const [typePopperElement, setTypePopperElement] = useState(null);
-
   const [showType, setShowType] = useState(false);
 
+  // Manage settings
+  const [settingsReferenceElement, setSettingsReferenceElement] =
+    useState(null);
+  const [settingsPopperElement, setSettingsPopperElement] = useState(null);
+  const [showSettings, setShowSettings] = useState(false);
   useEffect(() => {
     if (created) {
       setExpanded(true);
@@ -350,6 +356,29 @@ const HeaderMenu = (headerMenuProps: HeaderMenuProps) => {
                 </button>
               ))}
             </div>
+            <div
+              style={{
+                borderTop: `2px solid ${StyleVariables.BACKGROUND_DIVIDER}`,
+                padding: "4px 0px",
+              }}
+            >
+              {/** Column settings */}
+              <div style={{ padding: "4px 0px" }}>
+                <button
+                  className="sort-button"
+                  type="button"
+                  onMouseEnter={() => setShowSettings(true)}
+                  onMouseLeave={() => setShowSettings(false)}
+                  ref={setSettingsReferenceElement}
+                >
+                  <span className="svg-icon svg-text icon-margin">
+                    <AdjustmentsIcon />
+                  </span>
+                  <span>Settings</span>
+                </button>
+                {showSettings && <span>pruebas</span>}
+              </div>
+            </div>
           </div>
         </div>
       )}

src/components/img/AdjustmentsIcon.tsx

@@ -0,0 +1,27 @@
+import React from "react";
+
+export default function AdjustmentsIcon() {
+  return (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      strokeWidth="2"
+      stroke="currentColor"
+      fill="none"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+      <circle cx="14" cy="6" r="2" />
+      <line x1="4" y1="6" x2="12" y2="6" />
+      <line x1="16" y1="6" x2="20" y2="6" />
+      <circle cx="8" cy="12" r="2" />
+      <line x1="4" y1="12" x2="6" y2="12" />
+      <line x1="10" y1="12" x2="20" y2="12" />
+      <circle cx="17" cy="18" r="2" />
+      <line x1="4" y1="18" x2="15" y2="18" />
+      <line x1="19" y1="18" x2="20" y2="18" />
+    </svg>
+  );
+}

src/helpers/Constants.ts

@@ -10,6 +10,7 @@ export const ActionTypes = Object.freeze({
   ADD_COLUMN_TO_RIGHT: 'add_column_to_right',
   DELETE_COLUMN: 'delete_column',
   ENABLE_RESET: 'enable_reset',
+  SETTINGS_COLUMN: 'settings_column',
 });
 
 /** Flavours of data types */