chore(react/collections/table): enable modules

This commit is contained in:
Elian Doran
2025-09-06 19:19:52 +03:00
parent b4cead757d
commit 9d877ec97a
3 changed files with 12 additions and 5 deletions

View File

@@ -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>

View File

@@ -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;

View File

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