Dockery/Trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-11-16 18:25:51 +01:00
Code Issues Packages Projects Releases Activity

feat(book/table): set up sample grid

Browse Source
This commit is contained in:
Elian Doran
2025-06-25 10:49:33 +03:00
parent 1b5dd4638d
commit 894a26cc67
2 changed files with 33 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
apps/client/src/widgets/view_widgets/table_view.ts
View File

@@ -1,3 +1,4 @@
import renderTable from "./table_view/renderer";
import ViewMode, { ViewModeArgs } from "./view_mode"; import ViewMode, { ViewModeArgs } from "./view_mode";
const TPL = /*html*/` const TPL = /*html*/`
@@ -10,20 +11,28 @@ const TPL = /*html*/`
user-select: none; user-select: none;
padding: 10px; padding: 10px;
} }
.table-view-container {
height: 100%;
}
</style> </style>
<div class="table-view-container">
<p>Table view goes here.</p> <p>Table view goes here.</p>
</div>
</div> </div>
`; `;
export default class TableView extends ViewMode { export default class TableView extends ViewMode {
private $root: JQuery<HTMLElement>; private $root: JQuery<HTMLElement>;
private $container: JQuery<HTMLElement>;
constructor(args: ViewModeArgs) { constructor(args: ViewModeArgs) {
super(args); super(args);
this.$root = $(TPL); this.$root = $(TPL);
this.$container = this.$root.find(".table-view-container");
args.$parent.append(this.$root); args.$parent.append(this.$root);
} }
@@ -32,6 +41,8 @@ export default class TableView extends ViewMode {
} }
async renderList() { async renderList() {
this.$container.empty();
renderTable(this.$container[0]);
return this.$root; return this.$root;
} }

21
apps/client/src/widgets/view_widgets/table_view/renderer.ts Normal file
View File

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