From 9d877ec97a59757b5f14b9be237d787968ab8ee1 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Sat, 6 Sep 2025 19:19:52 +0300
Subject: [PATCH] chore(react/collections/table): enable modules

---
 apps/client/src/widgets/collections/table/index.tsx  |  3 ++-
 .../src/widgets/collections/table/tabulator.tsx      | 12 ++++++++++--
 .../src/widgets/view_widgets/table_view/index.ts     |  2 --
 3 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/apps/client/src/widgets/collections/table/index.tsx b/apps/client/src/widgets/collections/table/index.tsx
index 5ad6ac3f2..dbf5055d0 100644
--- a/apps/client/src/widgets/collections/table/index.tsx
+++ b/apps/client/src/widgets/collections/table/index.tsx
@@ -1,12 +1,12 @@
 import { useEffect, useState } from "preact/hooks";
 import { ViewModeProps } from "../interface";
 import "./index.css";
-import { ColumnDefinition } from "tabulator-tables";
 import { buildColumnDefinitions } from "./columns";
 import getAttributeDefinitionInformation, { buildRowDefinitions, TableData } from "./rows";
 import { useNoteLabelInt } from "../../react/hooks";
 import { canReorderRows } from "../../view_widgets/table_view/dragging";
 import Tabulator from "./tabulator";
+import {SortModule, FormatModule, InteractionModule, EditModule, ResizeColumnsModule, FrozenColumnsModule, PersistenceModule, MoveColumnsModule, MoveRowsModule, ColumnDefinition, DataTreeModule} from 'tabulator-tables';
 
 interface TableConfig {
     tableData?: {
@@ -41,6 +41,7 @@ export default function TableView({ note, viewConfig }: ViewModeProps<TableConfi
                     className="table-view-container"
                     columns={columnDefs}
                     data={rowData}
+                    modules={[ SortModule, FormatModule, InteractionModule, EditModule, ResizeColumnsModule, FrozenColumnsModule, PersistenceModule, MoveColumnsModule, MoveRowsModule, DataTreeModule ]}
                 />
             )}
         </div>
diff --git a/apps/client/src/widgets/collections/table/tabulator.tsx b/apps/client/src/widgets/collections/table/tabulator.tsx
index ad6eaf741..a04838c84 100644
--- a/apps/client/src/widgets/collections/table/tabulator.tsx
+++ b/apps/client/src/widgets/collections/table/tabulator.tsx
@@ -1,5 +1,5 @@
 import { useEffect, useRef } from "preact/hooks";
-import { ColumnDefinition, Tabulator as VanillaTabulator } from "tabulator-tables";
+import { ColumnDefinition, Module, Tabulator as VanillaTabulator } from "tabulator-tables";
 import "tabulator-tables/dist/css/tabulator.css";
 import "../../../../src/stylesheets/table.css";
 
@@ -7,12 +7,20 @@ interface TableProps<T> {
     className?: string;
     columns: ColumnDefinition[];
     data?: T[];
+    modules?: (new (table: VanillaTabulator) => Module)[];
 }
 
-export default function Tabulator<T>({ className, columns, data }: TableProps<T>) {
+export default function Tabulator<T>({ className, columns, data, modules }: TableProps<T>) {
     const containerRef = useRef<HTMLDivElement>(null);
     const tabulatorRef = useRef<VanillaTabulator>(null);
 
+    useEffect(() => {
+        if (!modules) return;
+        for (const module of modules) {
+            VanillaTabulator.registerModule(module);
+        }
+    }, [modules]);
+
     useEffect(() => {
         if (!containerRef.current) return;
 
diff --git a/apps/client/src/widgets/view_widgets/table_view/index.ts b/apps/client/src/widgets/view_widgets/table_view/index.ts
index fc6008e00..2d030f4cd 100644
--- a/apps/client/src/widgets/view_widgets/table_view/index.ts
+++ b/apps/client/src/widgets/view_widgets/table_view/index.ts
@@ -2,7 +2,6 @@ import ViewMode, { type ViewModeArgs } from "../view_mode.js";
 import attributes from "../../../services/attributes.js";
 import SpacedUpdate from "../../../services/spaced_update.js";
 import type { EventData } from "../../../components/app_context.js";
-import {Tabulator, SortModule, FormatModule, InteractionModule, EditModule, ResizeColumnsModule, FrozenColumnsModule, PersistenceModule, MoveColumnsModule, MoveRowsModule, ColumnDefinition, DataTreeModule, Options, RowComponent, ColumnComponent} from 'tabulator-tables';
 
 import { canReorderRows, configureReorderingRows } from "./dragging.js";
 import buildFooter from "./footer.js";
@@ -51,7 +50,6 @@ export default class TableView extends ViewMode<StateInfo> {
     }
 
     private async renderTable(el: HTMLElement) {
-        const modules = [ SortModule, FormatModule, InteractionModule, EditModule, ResizeColumnsModule, FrozenColumnsModule, PersistenceModule, MoveColumnsModule, MoveRowsModule, DataTreeModule ];
         for (const module of modules) {
             Tabulator.registerModule(module);
         }