Vue.js: TabulatorPlus

<template>
 <div class="table-wrapper">
 <div class="controls">
 <button @click="refreshData">Refresh Data</button>
 <button @click="clearTableFilters">Clear Filters</button>
 </div>

 <div ref="tableElement"></div>
 </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount, watch } from 'vue';
import TabulatorPlus from './TabulatorPlus';
// นำเข้า CSS พื้นฐาน
import "tabulator-tables/dist/css/tabulator.min.css";

// 1. รับ Props จากภายนอก
const props = defineProps ({
 tableData: {
 type: Array,
 required: true
 }
}) ;

// 2. กำหนดตัวแปรสำหรับ DOM และ Instance
const tableElement = ref (null) ; // เก็บ reference ของ HTML Element
const tabulatorInstance = ref (null) ; // เก็บ Instance ของ Tabulator (Reused Instance) // 3. การสร้างตาราง (Initialize) เมื่อ Component Mount
onMounted ( () => {
 if (tableElement.value) {
 tabulatorInstance.value = new TabulatorPlus (tableElement.value, {
 data: props.tableData,
 columns: [
 { title: "Name", field: "name", width: 200 },
 { title: "Age", field: "age" },
 { title: "Location", field: "location" },
 ],
 }, "vue-user-settings") ; // storageKey สำหรับ persistence
 }
}) ;

// 4. การ Refresh ข้อมูล (เมื่อ Props เปลี่ยนแปลง) watch ( () => props.tableData, (newData) => {
 if (tabulatorInstance.value) {
 // ใช้ .setData () เพื่ออัปเดตข้อมูลเดิม แทนการสร้างตารางใหม่ (ดีต่อ Performance) tabulatorInstance.value.setData (newData) ;
 }
}, { deep: true }) ;

// 5. วิธีเรียกใช้ Method ภายใน Instance (Reused Instance) const refreshData = () => {
 if (tabulatorInstance.value) {
 // เช่น สั่งวาดตารางใหม่เพื่อให้ขนาดพอดีกับ Container
 tabulatorInstance.value.redraw (true) ;
 }
};

const clearTableFilters = () => {
 if (tabulatorInstance.value) {
 tabulatorInstance.value.clearFilter (true) ;
 }
};

// 6. การล้างข้อมูล (Unmount) onBeforeUnmount ( () => {
 if (tabulatorInstance.value) {
 console.log ("Destroying Tabulator Instance...") ;
 // ทำลาย Instance เพื่อป้องกัน Memory Leak
 tabulatorInstance.value.destroy () ;
 tabulatorInstance.value = null;
 }
}) ;
</script>

<style scoped>
.table-wrapper {
 padding: 1rem;
}
.controls {
 margin-bottom: 1rem;
 display: flex;
 gap: 10px;
}
/* คุณสามารถเพิ่ม CSS เพื่อแต่งตารางที่นี่ได้ */
:deep (.tabulator) {
 border-radius: 4px;
}
</style>

import { shallowRef } from 'vue';
const tabulatorInstance = shallowRef (null) ; // เร็วกว่า ref ปกติในกรณีนี้