From 894a26cc67bb0c3e564698d56aaa1641655a4b10 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Wed, 25 Jun 2025 10:49:33 +0300
Subject: [PATCH] feat(book/table): set up sample grid

---
 .../src/widgets/view_widgets/table_view.ts    | 13 +++++++++++-
 .../view_widgets/table_view/renderer.ts       | 21 +++++++++++++++++++
 2 files changed, 33 insertions(+), 1 deletion(-)
 create mode 100644 apps/client/src/widgets/view_widgets/table_view/renderer.ts

diff --git a/apps/client/src/widgets/view_widgets/table_view.ts b/apps/client/src/widgets/view_widgets/table_view.ts
index 926e0c127..2f47f67e7 100644
--- a/apps/client/src/widgets/view_widgets/table_view.ts
+++ b/apps/client/src/widgets/view_widgets/table_view.ts
@@ -1,3 +1,4 @@
+import renderTable from "./table_view/renderer";
 import ViewMode, { ViewModeArgs } from "./view_mode";
 
 const TPL = /*html*/`
@@ -10,20 +11,28 @@ const TPL = /*html*/`
         user-select: none;
         padding: 10px;
     }
+
+    .table-view-container {
+        height: 100%;
+    }
     </style>
 
-    <p>Table view goes here.</p>
+    <div class="table-view-container">
+        <p>Table view goes here.</p>
+    </div>
 </div>
 `;
 
 export default class TableView extends ViewMode {
 
     private $root: JQuery<HTMLElement>;
+    private $container: JQuery<HTMLElement>;
 
     constructor(args: ViewModeArgs) {
         super(args);
 
         this.$root = $(TPL);
+        this.$container = this.$root.find(".table-view-container");
         args.$parent.append(this.$root);
     }
 
@@ -32,6 +41,8 @@ export default class TableView extends ViewMode {
     }
 
     async renderList() {
+        this.$container.empty();
+        renderTable(this.$container[0]);
         return this.$root;
     }
 
diff --git a/apps/client/src/widgets/view_widgets/table_view/renderer.ts b/apps/client/src/widgets/view_widgets/table_view/renderer.ts
new file mode 100644
index 000000000..31559bc10
--- /dev/null
+++ b/apps/client/src/widgets/view_widgets/table_view/renderer.ts
@@ -0,0 +1,21 @@
+import { createGrid, AllCommunityModule, ModuleRegistry } from "ag-grid-community";
+
+ModuleRegistry.registerModules([ AllCommunityModule ]);
+
+export default function renderTable(el: HTMLElement) {
+    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 },
+        ],
+        // Column Definitions: Defines the columns to be displayed.
+        columnDefs: [
+            { field: "make" },
+            { field: "model" },
+            { field: "price" },
+            { field: "electric" }
+        ]
+    });
+}