TabulatorPlus: Universal Style

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

export default class TabulatorPlus extends Tabulator {
	constructor(el, userConfig = {}, storageKey = null) {
		const defaultConfig = {
			layout: "fitColumns",
			movableColumns: true,
			pagination: "local",
			paginationSize: 10,
			paginationSizeSelector: [10, 25, 50, 100],
			persistence: storageKey ? {
				filter: true,
				page: true,
				sort: true
			} : false,
			persistenceID: storageKey,
			placeholder: "No Data Available",
			resizableRows: true,
			responsiveLayout: "collapse"
		};

		const finalConfig = { ...defaultConfig, ...userConfig };
		super(el, finalConfig);
	}

	/**
	 * 1. Method for updating new data
	 * @param {Array} newData - New dataset to display
	 */
	refreshData(newData) {
		if (newData && Array.isArray(newData)) {
			// Use the original Tabulator's setData
			return this.setData(newData);
		}
		return Promise.reject("Invalid data format");
	}

	/**
	 * 2. Method to force redraw the table (e.g. when resizing or opening a modal)
	 */
	forceRedraw() {
		// redraw(true) will resize columns to fit the current container
		this.redraw(true);
	}

	/**
	 * 3. Method to clear all filters
	 */
	resetFilters() {
		this.clearFilter(true);
		this.clearHeaderFilter();
	}
}

// สร้าง Instance
const myTable = new TabulatorPlus("#table-id", {}, "user-123");

// เมื่อได้รับข้อมูลใหม่จาก API
api.getData().then(data => {
    myTable.refreshData(data); // เรียกผ่าน Method ที่เราสร้างใหม่
});

// เมื่อ User กดปุ่ม "ล้างค่าการค้นหา"
$("#btn-reset").on("click", () => {
    myTable.resetFilters();
});