หมวดหมู่: Programming

import { useEffect, useRef } from 'react';
import TabulatorPlus from './TabulatorPlus';
// อย่าลืม import CSS ของ tabulator ในโปรเจกต์ด้วย
import "tabulator-tables/dist/css/tabulator.min.css"; 

function UserTable({ data }) {
    const tableRef = useRef(null);           // อ้างอิง DOM Element
    const tabulatorInstance = useRef(null);   // เก็บ Instance ไว้เพื่อเรียกใช้ Method อื่นๆ (Reused Instance)

    // 1. Hook สำหรับการ Initialize และ Cleanup (Unmount)
    useEffect(() => {
        if (tableRef.current && !tabulatorInstance.current) {
            // สร้าง Instance ครั้งแรก
            tabulatorInstance.current = new TabulatorPlus(tableRef.current, {
                data: data, // ข้อมูลเริ่มต้น
                columns: [
                    { title: "Name", field: "name", width: 150 },
                    { title: "Age", field: "age", hozAlign: "left" },
                    { title: "Status", field: "status", formatter: "tickCross" },
                ],
            }, "user-table-storage");
        }

        // Cleanup: ล้างข้อมูลและทำลาย Instance เมื่อ Unmount
        return () => {
            if (tabulatorInstance.current) {
                console.log("Cleaning up Tabulator instance...");
                tabulatorInstance.current.destroy();
                tabulatorInstance.current = null;
            }
        };
    }, []); // ทำงานครั้งเดียวตอน Mount

    // 2. Hook สำหรับการ Refresh ข้อมูล (เมื่อ Props 'data' เปลี่ยนแปลง)
    useEffect(() => {
        if (tabulatorInstance.current) {
            console.log("Refreshing data...");
            // ใช้ setData เพื่ออัปเดตข้อมูลโดยไม่สร้างตารางใหม่ (Performance ดีกว่า)
            tabulatorInstance.current.setData(data);
        }
    }, [data]);

    // 3. ฟังก์ชันสำหรับเรียกใช้งาน Instance จากภายนอก (Manual Refresh/Action)
    const handleManualRefresh = () => {
        if (tabulatorInstance.current) {
            // เช่น สั่งให้ตารางวาดใหม่หลังเปลี่ยนขนาดหน้าจอ หรือล้าง Filter
            tabulatorInstance.current.clearFilter(true);
            tabulatorInstance.current.redraw(true);
        }
    };

    return (
        <div style={{ padding: "20px" }}>
            <button 
                onClick={handleManualRefresh}
                style={{ marginBottom: "10px" }}
            >
                Clear Filters & Redraw
            </button>
            
            {/* Element ที่ Tabulator จะไปเกาะ */}
            <div ref={tableRef}></div>
        </div>
    );
}

export default UserTable;