Tabulator: TabulatorPlus ( Wrapper Class )

เพราะว่าโปรเจคที่ทำอยู่ มีการออกแบบ ตัวตารางเอาไว้เรียบร้อยแล้วแต่ว่า วันหนึ่งลูกค้าอยากได้ function หนึ่งที่เห้นมาจากงานหน้าหนึ่ง เลยอยากจะ “พี่ขอเปลี่ยนนิดหน่อย” ความจริงมันไม่ได้ยาก เพราะเปลี่ยนแค่ 2 บรรทัดจริง ๆ แต่ 300 จุด เลยคิดถึง การทำ Wrapper Class อย่าง TabulatorPlus ขึ้นมาที่ช่วยให้โค้ดสะอาดและดูแลรักษาง่าย ( Maintainability ) ในระยะยาวครับ

🚀 ยกระดับการจัดการตารางด้วย TabulatorPlus: สร้าง Standard Table ที่ใช้ได้ทุก Framework

ในการพัฒนา Web Application ขนาดใหญ่ ปัญหาที่พบบ่อยคือ “ตารางแสดงผลไม่เหมือนกัน” ในแต่ละหน้า เดี๋ยวหน้าหนึ่งมีปุ่มค้นหา อีกหน้าไม่มี หรือตั้งค่า Pagination ไม่เท่ากัน การสร้าง TabulatorPlus ขึ้นมาเป็น Wrapper Class คือทางออกที่จะช่วยคุมมาตรฐานของ UI/UX ทั้งโปรเจกต์ให้เป็นหนึ่งเดียว

💡 ทำไมต้องมี TabulatorPlus ?

1. Centralized Configuration: กำหนดค่า Default ที่ดีที่สุด ( Best Practice ) ไว้ที่เดียว เช่น การตั้งค่าภาษาไทย, รูปแบบวันที่, หรือขนาดหน้าตาราง
2. State Persistence Made Easy: จัดการเรื่องการจำสถานะ ( Sort, Filter, Pag e) ของผู้ใช้ผ่าน storageKey ได้อย่างเป็นระบบ
3. Framework Agnostic: เขียนครั้งเดียว ( Vanilla JS ) สามารถนำไปใช้ได้ทั้งใน React, Vue, Angular หรือแม้แต่ HTML ธรรมดา

🛠 เจาะลึกโครงสร้าง TabulatorPlus

ราใช้หลักการของ Inheritance ( การสืบทอด ) เพื่อขยายความสามารถของ Tabulator ต้นฉบับ
TabulatorPlus.js

import { TabulatorFull as Tabulator } from 'tabulator-tables';

export default class TabulatorPlus extends Tabulator {
	constructor(el, userConfig = {}, storageKey = null) {
		// 1. Set the default config for every table
		const defaultConfig = {
			layout: "fitColumns",
			movableColumns: true,
			pagination: "local", // Always enable pagination
			paginationSize: 10,	// Number of rows per page
			paginationSizeSelector: [10, 25, 50, 100],
			persistence: storageKey ? {
				filter: true,
				page: true,
				sort: true
			} : false,
			persistenceID: storageKey,
			placeholder: "No Data Available",
			resizableRows: true,
			responsiveLayout: "collapse"
		};

		// 2. Merge user config with default config
		const finalConfig = { ...defaultConfig, ...userConfig };

		// 3. Call the parent (Tabulator) constructor
		super(el, finalConfig);
	}
}

🌟 เทคนิคเสริมให้ TabulatorPlus ทรงพลังยิ่งขึ้น

การจัดการ Memory Leak ( สำคัญมาก! )

เมื่อใช้ใน Framework อย่าง React หรือ Vue เมื่อ Component ถูกถอดออก ( Unmount ) เราควรทำความสะอาดตารางเพื่อคืน Memory

// React useEffect
return () => {
    if (tableInstance) tableInstance.destroy();
};

การทำ Deep Merge

หากคุณต้องการส่ง Config ที่เป็น Object ซ้อนกัน ( เช่น ajaxConfig ) การใช้ ...spread แบบธรรมดาอาจไปทับค่าเดิมทั้งหมด แนะนำให้ใช้ฟังก์ชันช่วย merge เพื่อรักษาค่า Default ไว้

Global Styling

คุณสามารถผูก CSS Theme หลักไว้ในไฟล์ที่เรียกใช้ TabulatorPlus เพื่อให้ทุกตารางในระบบมีหน้าตา ( Look & Feel ) ที่สวยงามเหมือนกันโดยไม่ต้องตั้งค่าใหม่ทุกครั้ง

📝 สรุป

TabulatorPlus ไม่ใช่แค่การเขียนโค้ดทับ Library เดิม แต่คือการสร้าง “ระบบจัดการข้อมูล” ( Data Management System ) ที่ยืดหยุ่นและมีมาตรฐาน ช่วยลดเวลาในการเขียนโค้ดซ้ำซ้อน ( Don’t Repeat Yourself – DRY ) และทำให้ทีมพัฒนาทำงานได้ไวขึ้นอย่างมหาศาลครับ

อ่านเพิ่มเติม

• Tabulator: common configuration
• Tabulator: data.filters
• Tabulator: form.rowSelection
• Tabulator: data from clone