React: TabulatorPlus

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 ;
} export default UserTable;