added delete and RowOption component

compass/components/Table/Index.tsx

@@ -31,13 +31,17 @@ type User = {
 export const Table = () => {
   const columnHelper = createColumnHelper<User>();
 
+  const deleteUser = (userId) => {
+    setData(currentData => currentData.filter(user => user.id !== userId));
+  };
+
   const columns = [
     columnHelper.display({
       id: "options",
-      cell: props => <RowOptionMenu />
+      cell: props => <RowOptionMenu onDelete={() => deleteUser(props.row.original.id)} />
     }),
     columnHelper.accessor("username", {
-      header: () => <><Bars2Icon className="inline align-top h-4" /> Username</>,
+      header: () => <><Bars2Icon className="inline align-top h-4 mr-2" /> Username</>,
       cell: (info) => <RowOpenAction title={info.getValue()} />,
     }),
     columnHelper.accessor("role", {
@@ -99,7 +103,7 @@ export const Table = () => {
                   className={
                     "p-2 "
                     + ((1 < i && i < columns.length - 1) ? "border-x" : "")
-                    + ((i === 0) ? "text-center px-0" : "")
+                    + ((i === 0) ? "text-left px-0" : "")
                   }
                   key={cell.id}>
                   {flexRender(cell.column.columnDef.cell, cell.getContext())}

compass/components/Table/RowOption.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import { TrashIcon, DocumentDuplicateIcon, ArrowUpRightIcon, EyeSlashIcon } from "@heroicons/react/24/solid";
+
+export const RowOption = ({ icon: Icon, label, onClick }) => {
+  return (
+    <button onClick={onClick} className="hover:bg-gray-100 flex items-center gap-2 p-2 w-full">
+    <Icon className="inline h-4" /> {label}
+  </button>
+  );
+};

compass/components/Table/RowOptionMenu.tsx

@@ -1,9 +1,10 @@
 //delete, duplicate, open
-import { TrashIcon, DocumentDuplicateIcon, ArrowUpRightIcon, EllipsisVerticalIcon } from "@heroicons/react/24/solid";
+import { TrashIcon, DocumentDuplicateIcon, ArrowUpRightIcon, EllipsisVerticalIcon, EyeSlashIcon } from "@heroicons/react/24/solid";
+import Button from "../Button";
 import { useState, useEffect, useRef } from "react";
+import { RowOption } from "./RowOption";
 
-
-export const RowOptionMenu = () => {
+export const RowOptionMenu = ( { onDelete } ) => {
   const [menuOpen, setMenuOpen] = useState(false);
   const openMenu = () => setMenuOpen(true);
   const closeMenu = () => setMenuOpen(false);
@@ -15,12 +16,12 @@ export const RowOptionMenu = () => {
     <>
     <button className="align-center" onClick={() => setMenuOpen(!menuOpen)}><EllipsisVerticalIcon className="h-4"/></button>
     <div
-      className={"absolute text-left bg-white w-auto p-1 rounded [&>*]:p-1 [&>*]:px-5 [&>*]:rounded" + (!menuOpen ? " invisible" : "")}
+      className={"justify-start border border-gray-200 shadow-lg flex flex-col absolute bg-white w-auto p-2 rounded  [&>*]:rounded" + (!menuOpen ? " invisible" : "")}
     >
-      <div className="hover:bg-gray-100"><TrashIcon className="inline h-4"/> Delete</div>
-      <div className="hover:bg-gray-100"><DocumentDuplicateIcon className="inline h-4"/> Duplicate</div>
-      <div className="hover:bg-gray-100"><ArrowUpRightIcon className="inline h-4"/> Open</div>
-    </div>
-    </>
+      <RowOption icon={TrashIcon} label="Delete" onClick={onDelete} />
+        <RowOption icon={ArrowUpRightIcon} label="Open" onClick={() => { /* handle open */ }} />
+        <RowOption icon={EyeSlashIcon} label="Hide" onClick={() => { /* handle hide */ }} />
+      </div>
+</>
   );
 }

compass/package-lock.json

@@ -4395,4 +4395,3 @@
     }
   }
 }
-