diff --git a/apps/client/src/widgets/view_widgets/table_view.ts b/apps/client/src/widgets/view_widgets/table_view.ts
index 2f47f67e7..b87b72702 100644
--- a/apps/client/src/widgets/view_widgets/table_view.ts
+++ b/apps/client/src/widgets/view_widgets/table_view.ts
@@ -1,4 +1,5 @@
-import renderTable from "./table_view/renderer";
+import froca from "../../services/froca.js";
+import renderTable from "./table_view/renderer.js";
 import ViewMode, { ViewModeArgs } from "./view_mode";
 
 const TPL = /*html*/`
@@ -27,12 +28,14 @@ export default class TableView extends ViewMode {
 
     private $root: JQuery<HTMLElement>;
     private $container: JQuery<HTMLElement>;
+    private noteIds: string[];
 
     constructor(args: ViewModeArgs) {
         super(args);
 
         this.$root = $(TPL);
         this.$container = this.$root.find(".table-view-container");
+        this.noteIds = args.noteIds;
         args.$parent.append(this.$root);
     }
 
@@ -41,8 +44,10 @@ export default class TableView extends ViewMode {
     }
 
     async renderList() {
+        const notes = await froca.getNotes(this.noteIds);
+
         this.$container.empty();
-        renderTable(this.$container[0]);
+        renderTable(this.$container[0], notes);
         return this.$root;
     }
 
diff --git a/apps/client/src/widgets/view_widgets/table_view/data.ts b/apps/client/src/widgets/view_widgets/table_view/data.ts
new file mode 100644
index 000000000..a9b164cc0
--- /dev/null
+++ b/apps/client/src/widgets/view_widgets/table_view/data.ts
@@ -0,0 +1,29 @@
+import { GridOptions } from "ag-grid-community";
+import FNote from "../../../entities/fnote";
+
+interface Data {
+    title: string;
+}
+
+export function buildColumnDefinitions(): GridOptions<Data>["columnDefs"] {
+    return [
+        {
+            field: "title"
+        }
+    ];
+}
+
+export function buildRowDefinitions(notes: FNote[]): GridOptions<Data>["rowData"] {
+    const definitions: GridOptions<Data>["rowData"] = [];
+    for (const note of notes) {
+        definitions.push(buildRowDefinition(note));
+    }
+
+    return definitions;
+}
+
+export function buildRowDefinition(note: FNote): Data {
+    return {
+        title: note.title
+    }
+}
diff --git a/apps/client/src/widgets/view_widgets/table_view/renderer.ts b/apps/client/src/widgets/view_widgets/table_view/renderer.ts
index 31559bc10..385acd1bf 100644
--- a/apps/client/src/widgets/view_widgets/table_view/renderer.ts
+++ b/apps/client/src/widgets/view_widgets/table_view/renderer.ts
@@ -1,21 +1,16 @@
 import { createGrid, AllCommunityModule, ModuleRegistry } from "ag-grid-community";
+import { buildColumnDefinitions, buildRowDefinitions } from "./data.js";
+import FNote from "../../../entities/fnote.js";
 
 ModuleRegistry.registerModules([ AllCommunityModule ]);
 
-export default function renderTable(el: HTMLElement) {
+export default function renderTable(el: HTMLElement, notes: FNote[]) {
+    const rowData = buildRowDefinitions(notes);
+
     createGrid(el, {
         // Row Data: The data to be displayed.
-        rowData: [
-            { make: "Tesla", model: "Model Y", price: 64950, electric: true },
-            { make: "Ford", model: "F-Series", price: 33850, electric: false },
-            { make: "Toyota", model: "Corolla", price: 29600, electric: false },
-        ],
+        rowData: rowData,
         // Column Definitions: Defines the columns to be displayed.
-        columnDefs: [
-            { field: "make" },
-            { field: "model" },
-            { field: "price" },
-            { field: "electric" }
-        ]
+        columnDefs: buildColumnDefinitions()
     });
 }