jQuery: TabulatorPlus

$(document).ready(function() {
    // 1. กำหนดตัวแปรสำหรับเก็บ Instance (Reused Instance)
    let tableInstance = null;
    const $tableEl = $("#my-table");

    // --- FUNCTION: INITIALIZE (การสร้างครั้งแรก) ---
    function initTable(initialData) {
        // ตรวจสอบเพื่อไม่ให้สร้างซ้อน (Idempotent)
        if (tableInstance) return;

        tableInstance = new TabulatorPlus($tableEl[0], {
            data: initialData,
            columns: [
                { title: "ID", field: "id", width: 50 },
                { title: "Product", field: "product", width: 200 },
                { title: "Price", field: "price", formatter: "money" },
            ],
        }, "jquery-storage-key");

        // หรือจะเก็บไว้ใน jQuery Data เพื่อเรียกใช้จากที่อื่นก็ได้
        $tableEl.data("tabulator-instance", tableInstance);
    }

    // --- FUNCTION: REFRESH (อัปเดตข้อมูล) ---
    window.refreshTableData = function(newData) {
        if (tableInstance) {
            console.log("Refreshing data...");
            // ใช้ .setData() เพื่ออัปเดตข้อมูลโดยไม่ต้องวาดตารางใหม่ทั้งหมด
            tableInstance.setData(newData);
        }
    };

    // --- FUNCTION: ACTION (เรียกใช้ Method) ---
    $("#btn-clear-filter").on("click", function() {
        if (tableInstance) {
            tableInstance.clearFilter(true);
        }
    });

    // --- FUNCTION: UNMOUNT / DESTROY (การล้างข้อมูล) ---
    window.destroyTable = function() {
        if (tableInstance) {
            console.log("Destroying table...");
            // ล้าง Event และ DOM ที่ Tabulator สร้างขึ้น
            tableInstance.destroy();
            tableInstance = null;
            $tableEl.removeData("tabulator-instance");
        }
    };

    // ทดลองรัน
    initTable([
        { id: 1, product: "Laptop", price: 35000 },
        { id: 2, product: "Mouse", price: 1200 }
    ]);
});