feat(book/table): set up sample grid

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

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