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,7 +62,7 @@ export const Table = () => {
     getCoreRowModel: getCoreRowModel(),
   });
 
-  return(
+  return (
     <div className="flex flex-col">
       <div className="flex flex-row justify-end">
         <TableAction />
@@ -63,8 +71,15 @@ export const Table = () => {
         <thead className="text-xs text-gray-500 capitalize">
           {table.getHeaderGroups().map((headerGroup) => (
             <tr key={headerGroup.id}>
-                {headerGroup.headers.map((header) => (
+              {headerGroup.headers.map((header, i) => (
-                  <th scope="col" className="p-3 border-gray-200 border-y font-medium" key={header.id}>
+                <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(
@@ -79,8 +94,14 @@ export const Table = () => {
         <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) => (
+              {row.getVisibleCells().map((cell, i) => (
-                  <td className="py-2 px-2" key={cell.id}>
+                <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>
               ))}

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>
+    </>
+  );
+}