Tried

compass/components/Table/Index.tsx

@@ -11,6 +11,7 @@ import {
 import { useState } from "react";
 import { RowAction } from "./RowAction";
 import { TableAction } from "./TableAction";
+import TagsInput from "../TagsInput/Index";
 
 const usersExample = usersImport as unknown as User[];
 
@@ -34,7 +35,7 @@ export const Table = () => {
       cell: (info) => <RowAction title={info.getValue()} />,
     }),
     columnHelper.accessor("role", {
-      cell: (info) => info.renderValue(),
+      cell: (info) => <TagsInput />,
     }),
     columnHelper.accessor("email", {
       cell: (info) => info.renderValue(),

compass/components/TagsInput/Index.tsx

@@ -0,0 +1,70 @@
+// In a file TagsInput.tsx
+
+import { useState } from 'react';
+import 'tailwindcss/tailwind.css';
+import {TagsArray} from './TagsArray'; // Assuming this is the correct path
+import { TagDropdown } from './TagDropdown';
+
+const TagsInput = () => {
+  const [inputValue, setInputValue] = useState('');
+  const [cellSelected, setCellSelected] = useState(false);
+  const [tags, setTags] = useState<string[]>(['Administrator']);
+  const [options, setOptions] = useState<string[]>(["Administrators", "Employees", "Volunteers"]);
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setInputValue(e.target.value);
+  };
+
+  // Function to handle adding new tags when enter is pressed
+  const handleAddTag = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === 'Enter' && inputValue) {
+      setTags([...tags, inputValue]);
+      setInputValue('');
+    }
+  };
+
+  // Function to handle deleting tags
+  const handleDeleteTag = (tagToDelete: string) => {
+    setTags(tags.filter(tag => tag !== tagToDelete));
+  };
+
+  const handleBlur = () => {
+    setCellSelected(false);
+  };
+
+  return (
+    <div
+      className="w-full relative items-center cursor-pointer"
+      onClick={() => setCellSelected(true)} 
+    >
+      {!cellSelected ? (
+        <TagsArray tags={tags}  />
+      ) : (
+        <div className="absolute z-50 object-top">
+        <div className="rounded-md  border border-gray-200 shadow">
+          <div className="flex flex-wrap rounded-t-md items-center gap-2 bg-gray-50 p-2">
+            <TagsArray active={true} tags={tags} />
+          <input
+            type="text"
+            value={inputValue}
+            placeholder="Search for an option..."
+            onChange={handleInputChange}
+            onKeyDown={handleAddTag} 
+            onBlur={handleBlur} 
+            className="focus:outline-none bg-transparent"
+            autoFocus 
+          />
+          </div>
+          <div className="flex rounded-b-md bg-white flex-col border-t border-gray-100 text-2xs font-medium text-gray-500 p-2">
+            Select an option or create one
+            <TagDropdown tags={options} />
+            </div>
+            
+        </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default TagsInput;

compass/components/TagsInput/Tag.tsx

@@ -0,0 +1,9 @@
+import { XMarkIcon } from "@heroicons/react/24/solid"
+
+export const Tag = ({children, active = false}) => {
+    return (
+        <span className="font-normal text-gray-800 flex flex-row p-1 px-2 rounded-lg bg-blue-100">{children}
+        {active && <XMarkIcon className="ml-1 w-3 text-blue-500" />}
+        </span>
+    )
+}

compass/components/TagsInput/TagDropdown.tsx

@@ -0,0 +1,15 @@
+import { EllipsisHorizontalIcon } from "@heroicons/react/24/solid"
+import { Tag } from "./Tag"
+
+export const TagDropdown = ({tags}) => {
+    return (
+        <div className="flex flex-col space-y-2 mt-2">
+            
+            {tags.map((tag) => {
+                return <div className="rounded-md p-1 flex flex-row justify-between hover:bg-gray-100"><Tag>{tag}</Tag><EllipsisHorizontalIcon className="w-5 text-gray-500" /></div>
+            })}
+            
+            
+        </div>
+    )
+}

compass/components/TagsInput/TagsArray.tsx

@@ -0,0 +1,15 @@
+import { Tag } from "./Tag"
+
+export const TagsArray = ({ tags, active = false }) => {
+    return(
+        <div className="flex items-center space-x-2">
+        {
+          tags.map((tag) => {
+            return (
+              <Tag active={active}>{tag}</Tag>
+            )
+          })
+        }
+      </div>
+    )
+}