tabulatorのsetDataでInvalid column definition optionになる

2024年7月27日土曜日

tabulator

t f B! P L
tabulator 6.2でテーブルのデータをJSON形式で取得して表示しようとしたところ、何故かうまく表示されません。
    const updateTable = new Tabulator("#upload-table", {
        selectable: true,
        fitColumns: true,
        height: "120px",
        columns: [
            {title: "Name", field: "name", sorter: "string"},
            {title: "Date", field: "date", sorter: "date", width: 150},
            {title: "Size", field: "size", sorter: "number", width: 100}
        ],
    });

    updateTable.on("tableBuilt", () => {
        updateTable.setData(route('top.upload-list'))
        :
Webブラウザのコンソールを確認すると、次のようなワーニングとエラーが出力されていました。
しかし、JSONの出力内容をいくら確認しても、間違っているようには見えません。

原因と解決方法

インポートしているライブラリがワーニングやエラーの原因だったようです。Tabulatorではなく、TabulatorFullをインポートするように変更すると、ワーニングとエラーが解消されて、正常にテーブルが表示されました。

//import { Tabulator } from 'tabulator-tables';  // ワーニングとエラーが発生
import { TabulatorFull as Tabulator } from "tabulator-tables";

このブログを検索

QooQ