diff --git a/apps/client/src/widgets/view_widgets/table_view/data.ts b/apps/client/src/widgets/view_widgets/table_view/data.ts
index fd667ca0a..a86886f70 100644
--- a/apps/client/src/widgets/view_widgets/table_view/data.ts
+++ b/apps/client/src/widgets/view_widgets/table_view/data.ts
@@ -2,6 +2,7 @@ import FNote from "../../../entities/fnote.js";
 import type { LabelType } from "../../../services/promoted_attribute_definition_parser.js";
 import type { ColumnDefinition } from "tabulator-tables";
 import link from "../../../services/link.js";
+import RelationEditor from "./relation_editor.js";
 
 export type TableData = {
     iconClass: string;
@@ -12,13 +13,15 @@ export type TableData = {
     position: number;
 };
 
+type ColumnType = LabelType | "relation";
+
 export interface PromotedAttributeInformation {
     name: string;
     title?: string;
-    type?: LabelType | "relation";
+    type?: ColumnType;
 }
 
-const labelTypeMappings: Record<LabelType, Partial<ColumnDefinition>> = {
+const labelTypeMappings: Record<ColumnType, Partial<ColumnDefinition>> = {
     text: {
         editor: "input"
     },
@@ -41,6 +44,9 @@ const labelTypeMappings: Record<LabelType, Partial<ColumnDefinition>> = {
     url: {
         formatter: "link",
         editor: "input"
+    },
+    relation: {
+        editor: RelationEditor
     }
 };
 
diff --git a/apps/client/src/widgets/view_widgets/table_view/relation_editor.ts b/apps/client/src/widgets/view_widgets/table_view/relation_editor.ts
index 4f4f17f52..34efad4f6 100644
--- a/apps/client/src/widgets/view_widgets/table_view/relation_editor.ts
+++ b/apps/client/src/widgets/view_widgets/table_view/relation_editor.ts
@@ -1,4 +1,5 @@
 import { CellComponent } from "tabulator-tables";
+import note_autocomplete from "../../../services/note_autocomplete";
 
 export default function RelationEditor(cell: CellComponent, onRendered, success, cancel, editorParams){
     //cell - the cell component for the editable cell
@@ -8,9 +9,9 @@ export default function RelationEditor(cell: CellComponent, onRendered, success,
     //editorParams - params object passed into the editorParams column definition property
 
     //create and style editor
-    var editor = document.createElement("input");
-
-    editor.setAttribute("type", "date");
+    const editor = document.createElement("input");
+    const $editor = $(editor);
+    editor.classList.add("form-control");
 
     //create and style input
     editor.style.padding = "3px";
@@ -22,13 +23,13 @@ export default function RelationEditor(cell: CellComponent, onRendered, success,
 
     //set focus on the select box when the editor is selected
     onRendered(function(){
+        note_autocomplete.initNoteAutocomplete($editor);
         editor.focus();
-        editor.style.css = "100%";
     });
 
     //when the value has been set, trigger the cell to update
     function successFunc(){
-        success("Hi");
+        success($editor.getSelectedNoteId());
     }
 
     editor.addEventListener("change", successFunc);