Initial implementation of options menu

compass/components/Table/Index.tsx

@@ -9,9 +9,10 @@ import {
   useReactTable,
 } from "@tanstack/react-table";
 import { useState } from "react";
-import { RowAction } from "./RowAction";
+import { RowOptionMenu } from "./RowOptionMenu";
 import { RowOpenAction } from "./RowOpenAction";
 import { TableAction } from "./TableAction";
+import { Bars2Icon, AtSymbolIcon, HashtagIcon, ArrowDownCircleIcon } from "@heroicons/react/24/solid";
 
 const usersExample = usersImport as unknown as User[];
 
@@ -31,17 +32,24 @@ export const Table = () => {
   const columnHelper = createColumnHelper<User>();
 
   const columns = [
+    columnHelper.display({
+      id: "options",
+      cell: props => <RowOptionMenu />
+    }),
     columnHelper.accessor("username", {
-      cell: (info) => <RowAction title={info.getValue()} />,
+      header: () => <><Bars2Icon className="inline align-top h-4" /> Username</>,
       cell: (info) => <RowOpenAction title={info.getValue()} />,
     }),
     columnHelper.accessor("role", {
+      header: () => <><ArrowDownCircleIcon className="inline align-top h-4" /> Role</>,
       cell: (info) => info.renderValue(),
     }),
     columnHelper.accessor("email", {
+      header: () => <><AtSymbolIcon className="inline align-top h-4" /> Email</>,
       cell: (info) => info.renderValue(),
     }),
     columnHelper.accessor("program", {
+      header: () => <><ArrowDownCircleIcon className="inline align-top h-4" /> Program</>,
       cell: (info) => info.renderValue(),
     }),
   ];
@@ -54,40 +62,53 @@ export const Table = () => {
     getCoreRowModel: getCoreRowModel(),
   });
 
-  return(
+  return (
     <div className="flex flex-col">
-    <div className="flex flex-row justify-end">
-    <TableAction />
+      <div className="flex flex-row justify-end">
+        <TableAction />
+      </div>
+      <table className="w-full text-xs text-left rtl:text-right">
+        <thead className="text-xs text-gray-500 capitalize">
+          {table.getHeaderGroups().map((headerGroup) => (
+            <tr key={headerGroup.id}>
+              {headerGroup.headers.map((header, i) => (
+                <th
+                  scope="col"
+                  className={
+                    "p-2 border-gray-200 border-y font-medium "
+                    + ((1 < i && i < columns.length - 1) ? "border-x" : "")
+                  }
+                  key={header.id}
+                >
+                  {header.isPlaceholder
+                    ? null
+                    : flexRender(
+                      header.column.columnDef.header,
+                      header.getContext()
+                    )}
+                </th>
+              ))}
+            </tr>
+          ))}
+        </thead>
+        <tbody className="">
+          {table.getRowModel().rows.map((row) => (
+            <tr className="text-gray-800 border-y lowercase hover:bg-gray-50" key={row.id}>
+              {row.getVisibleCells().map((cell, i) => (
+                <td
+                  className={
+                    "p-2 "
+                    + ((1 < i && i < columns.length - 1) ? "border-x" : "")
+                    + ((i === 0) ? "text-center px-0" : "")
+                  }
+                  key={cell.id}>
+                  {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                </td>
+              ))}
+            </tr>
+          ))}
+        </tbody>
+      </table>
     </div>
-    <table className="w-full text-xs text-left rtl:text-right">
-          <thead className="text-xs text-gray-500 capitalize">
-            {table.getHeaderGroups().map((headerGroup) => (
-              <tr key={headerGroup.id}>
-                {headerGroup.headers.map((header) => (
-                  <th scope="col" className="p-3 border-gray-200 border-y font-medium" key={header.id}>
-                    {header.isPlaceholder
-                      ? null
-                      : flexRender(
-                          header.column.columnDef.header,
-                          header.getContext()
-                        )}
-                  </th>
-                ))}
-              </tr>
-            ))}
-          </thead>
-          <tbody className="">
-            {table.getRowModel().rows.map((row) => (
-              <tr className="text-gray-800 border-y lowercase hover:bg-gray-50" key={row.id}>
-                {row.getVisibleCells().map((cell) => (
-                  <td className="py-2 px-2" key={cell.id}>
-                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
-                  </td>
-                ))}
-              </tr>
-            ))}
-          </tbody>
-        </table>
-        </div>
   )
-}
+}

compass/components/Table/RowOptionMenu.tsx

@@ -0,0 +1,26 @@
+//delete, duplicate, open
+import { TrashIcon, DocumentDuplicateIcon, ArrowUpRightIcon, EllipsisVerticalIcon } from "@heroicons/react/24/solid";
+import { useState, useEffect, useRef } from "react";
+
+
+export const RowOptionMenu = () => {
+  const [menuOpen, setMenuOpen] = useState(false);
+  const openMenu = () => setMenuOpen(true);
+  const closeMenu = () => setMenuOpen(false);
+
+
+  // TODO: Hide menu if clicked elsewhere
+
+  return (
+    <>
+    <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" : "")}
+    >
+      <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>
+    </>
+  );
+}