refactor(views/table): start switching to tabulator

apps/client/package.json

@@ -26,7 +26,6 @@
     "@triliumnext/commons": "workspace:*",
     "@triliumnext/highlightjs": "workspace:*",
     "@triliumnext/share-theme": "workspace:*",
-    "ag-grid-community": "33.3.2",
     "autocomplete.js": "0.38.1",
     "bootstrap": "5.3.7",
     "boxicons": "2.1.4",
@@ -55,6 +54,7 @@
     "preact": "10.26.9",
     "split.js": "1.6.5",
     "svg-pan-zoom": "3.6.2",
+    "tabulator-tables": "6.3.1",
     "vanilla-js-wheel-zoom": "9.0.4"
   },
   "devDependencies": {

apps/client/src/widgets/view_widgets/table_view/index.ts

@@ -1,16 +1,15 @@
 import froca from "../../../services/froca.js";
 import ViewMode, { type ViewModeArgs } from "../view_mode.js";
-import { createGrid, AllCommunityModule, ModuleRegistry, GridOptions, themeQuartz, colorSchemeDark } from "ag-grid-community";
 import attributes, { setLabel } from "../../../services/attributes.js";
-import getPromotedAttributeInformation, { buildColumnDefinitions, buildData, buildRowDefinitions, TableData } from "./data.js";
+import getPromotedAttributeInformation, { buildColumnDefinitions, buildData, TableData } from "./data.js";
-import applyHeaderCustomization from "./header-customization.js";
 import server from "../../../services/server.js";
-import type { GridApi, GridState, Theme } from "ag-grid-community";
 import SpacedUpdate from "../../../services/spaced_update.js";
 import branches from "../../../services/branches.js";
 import type { CommandListenerData, EventData } from "../../../components/app_context.js";
 import type { Attribute } from "../../../services/attribute_parser.js";
 import note_create from "../../../services/note_create.js";
+import {Tabulator} from 'tabulator-tables';
+import "tabulator-tables/dist/css/tabulator.min.css";
 
 const TPL = /*html*/`
 <div class="table-view">
@@ -66,8 +65,6 @@ export default class TableView extends ViewMode<StateInfo> {
         this.args = args;
         this.spacedUpdate = new SpacedUpdate(() => this.onSave(), 5_000);
         args.$parent.append(this.$root);
-
-        ModuleRegistry.registerModules([ AllCommunityModule ]);
     }
 
     get isFullHeight(): boolean {
@@ -84,19 +81,8 @@ export default class TableView extends ViewMode<StateInfo> {
         const viewStorage = await this.viewStorage.restore();
         const initialState = viewStorage?.gridState;
 
-        const options: GridOptions<TableData> = {
+        const table = new Tabulator(el, {
-            ...this.setupEditing(),
+        });
-            ...this.setupDragging(),
-            initialState,
-            theme: this.getTheme(),
-            async onGridReady(event) {
-                applyHeaderCustomization(el, event.api);
-            },
-            onStateUpdated: () => this.spacedUpdate.scheduleUpdate()
-        }
-
-        this.api = createGrid(el, options);
-        this.loadData();
     }
 
     private async loadData() {

pnpm-lock.yaml

@@ -202,9 +202,6 @@ importers:
       '@triliumnext/share-theme':
         specifier: workspace:*
         version: link:../../packages/share-theme
-      ag-grid-community:
-        specifier: 33.3.2
-        version: 33.3.2
       autocomplete.js:
         specifier: 0.38.1
         version: 0.38.1
@@ -289,6 +286,9 @@ importers:
       svg-pan-zoom:
         specifier: 3.6.2
         version: 3.6.2
+      tabulator-tables:
+        specifier: 6.3.1
+        version: 6.3.1
       vanilla-js-wheel-zoom:
         specifier: 9.0.4
         version: 9.0.4
@@ -5989,12 +5989,6 @@ packages:
     resolution: {integrity: sha512-4B/qKCfeE/ODUaAUpSwfzazo5x29WD4r3vXiWsB7I2mSDAihwEqKO+g8GELZUQSSAo5e1XTYh3ZVfLyxBc12nA==}
     engines: {node: '>= 10.0.0'}
 
-  ag-charts-types@11.3.2:
-    resolution: {integrity: sha512-trPGqgGYiTeLgtf9nLuztDYOPOFOLbqHn1g2D99phf7QowcwdX0TPx0wfWG8Hm90LjB8IH+G2s3AZe2vrdAtMQ==}
-
-  ag-grid-community@33.3.2:
-    resolution: {integrity: sha512-9bx0e/+ykOyLvUxHqmdy0cRVANH6JAtv0yZdnBZEXYYqBAwN+G5a4NY+2I1KvoOCYzbk8SnStG7y4hCdVAAWOQ==}
-
   agent-base@6.0.2:
     resolution: {integrity: sha512-RZNwNclF7+MS/8bDg70amg32dyeZGZxiDuQmZxKLAlQjr3jGyLx+4Kkk58UO7D2QdgFIQCovuSuZESne6RG6XQ==}
     engines: {node: '>= 6.0.0'}
@@ -13023,6 +13017,9 @@ packages:
     resolution: {integrity: sha512-9kY+CygyYM6j02t5YFHbNz2FN5QmYGv9zAjVp4lCDjlCw7amdckXlEt/bjMhUIfj4ThGRE4gCUH5+yGnNuPo5A==}
     engines: {node: '>=10.0.0'}
 
+  tabulator-tables@6.3.1:
+    resolution: {integrity: sha512-qFW7kfadtcaISQIibKAIy0f3eeIXUVi8242Vly1iJfMD79kfEGzfczNuPBN/80hDxHzQJXYbmJ8VipI40hQtfA==}
+
   tailwindcss@4.1.10:
     resolution: {integrity: sha512-P3nr6WkvKV/ONsTzj6Gb57sWPMX29EPNPopo7+FcpkQaNsrNpZ1pv8QmrYI2RqEKD7mlGqLnGovlcYnBK0IqUA==}
 
@@ -21137,12 +21134,6 @@ snapshots:
 
   address@1.2.2: {}
 
-  ag-charts-types@11.3.2: {}
-
-  ag-grid-community@33.3.2:
-    dependencies:
-      ag-charts-types: 11.3.2
-
   agent-base@6.0.2:
     dependencies:
       debug: 4.4.1(supports-color@6.0.0)
@@ -29465,6 +29456,8 @@ snapshots:
       string-width: 4.2.3
       strip-ansi: 6.0.1
 
+  tabulator-tables@6.3.1: {}
+
   tailwindcss@4.1.10: {}
 
   tapable@2.2.1: {}