v0.1.0-pre.061

kb-app-demo-desktop/frontend/ts/demo_sql_tables.ts

@@ -1,9 +1,13 @@
 // file: kb-app-demo-desktop/frontend/ts/demo_sql_tables.ts
-// version: 2
+// version: 4
 
-import "@andypf/json-viewer";
+import DataTable, { type Api } from "datatables.net-bs5";
+import "datatables.net-bs5/css/dataTables.bootstrap5.css";
+import { jsonText, renderJsonViewer } from "./json_viewer.ts";
 import type { DemoSqlTableSnapshot } from "./bindings/kb_app_demo_desktop/demo_sql/DemoSqlTableSnapshot";
 
+const tableInstances = new Map<string, Api>();
+
 export function setText(selector: string, value: string): void {
     const element = document.querySelector<HTMLElement>(selector);
     if (element) {
@@ -11,8 +15,13 @@ export function setText(selector: string, value: string): void {
     }
 }
 
-export function renderTables(selector: string, tables: DemoSqlTableSnapshot[]): void {
-    const tbody = document.querySelector<HTMLTableSectionElement>(selector);
+export function renderTables(tableSelector: string, bodySelector: string, tables: DemoSqlTableSnapshot[]): void {
+    const existing = tableInstances.get(tableSelector);
+    if (existing) {
+        existing.destroy();
+        tableInstances.delete(tableSelector);
+    }
+    const tbody = document.querySelector<HTMLTableSectionElement>(bodySelector);
     if (!tbody) {
         return;
     }
@@ -29,32 +38,28 @@ export function renderTables(selector: string, tables: DemoSqlTableSnapshot[]):
         row.appendChild(cell(table.latestCreatedAt ?? "—", false));
         tbody.appendChild(row);
     }
-}
-
-export function jsonText(value: unknown): string {
-    return JSON.stringify(value, null, 2);
-}
-
-export function renderJsonViewer(selector: string, value: unknown): void {
-    const container = document.querySelector<HTMLElement>(selector);
-    if (!container) {
+    const tableElement = document.querySelector<HTMLTableElement>(tableSelector);
+    if (!tableElement) {
         return;
     }
-    const viewer = document.createElement("andypf-json-viewer");
-    viewer.setAttribute("indent", "2");
-    viewer.setAttribute("expanded", "1");
-    viewer.setAttribute("theme", "default-light");
-    viewer.setAttribute("show-data-types", "true");
-    viewer.setAttribute("show-toolbar", "false");
-    viewer.setAttribute("expand-icon-type", "arrow");
-    viewer.setAttribute("show-copy", "true");
-    viewer.setAttribute("show-size", "true");
-    viewer.setAttribute("expand-empty", "false");
-    viewer.setAttribute("data", jsonText(value));
-    container.textContent = "";
-    container.appendChild(viewer);
+    tableInstances.set(tableSelector, new DataTable(tableElement, {
+        scrollX: true,
+        pageLength: 25,
+        lengthMenu: [10, 25, 50, 100],
+        order: [[0, "asc"]],
+        language: {
+            emptyTable: "Aucune table disponible",
+            info: "Tables _START_ à _END_ sur _TOTAL_",
+            infoEmpty: "Aucune table",
+            lengthMenu: "Afficher _MENU_ tables",
+            search: "Rechercher :",
+            zeroRecords: "Aucune table correspondante",
+        },
+    }));
 }
 
+export { jsonText, renderJsonViewer };
+
 function cell(value: string, code: boolean): HTMLTableCellElement {
     const td = document.createElement("td");
     if (code) {