Trilium/apps/client/src/widgets/collections/table/tabulator.tsx

import { useEffect, useRef } from "preact/hooks";
import { ColumnDefinition, Module, Tabulator as VanillaTabulator } from "tabulator-tables";
import "tabulator-tables/dist/css/tabulator.css";
import "../../../../src/stylesheets/table.css";

interface TableProps<T> {
    className?: string;
    columns: ColumnDefinition[];
    data?: T[];
    modules?: (new (table: VanillaTabulator) => Module)[];
}

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;

        const tabulator = new VanillaTabulator(containerRef.current, {
            columns,
            data
        });

        tabulatorRef.current = tabulator;

        return () => tabulator.destroy();
    }, []);

    return (
        <div ref={containerRef} className={className} />
    );
}