ป้ายกำกับ: Lodash

/**
 * TabulatorPlus.js
 * A wrapper class for Tabulator-tables to provide standardized configurations
 * and deep-merge capabilities across different frameworks.
 */
import { TabulatorFull as Tabulator } from 'tabulator-tables';

/**
 * Helper function to check if an item is a plain object.
 * @param {any} item - The item to check.
 * @returns {boolean}
 */
function isObject(item) {
    return (item && typeof item === 'object' && !Array.isArray(item));
}

/**
 * Deeply merges two objects. 
 * This ensures nested properties (like 'persistence') aren't overwritten entirely
 * when only one sub-property is provided in the user configuration.
 * @param {Object} target - The default configuration object.
 * @param {Object} source - The user-provided configuration object.
 * @returns {Object} - The deeply merged configuration.
 */
function deepMerge(target, source) {
    let output = Object.assign({}, target);
    if (isObject(target) && isObject(source)) {
        Object.keys(source).forEach(key => {
            if (isObject(source[key])) {
                if (!(key in target)) {
                    Object.assign(output, { [key]: source[key] });
                } else {
                    output[key] = deepMerge(target[key], source[key]);
                }
            } else {
                Object.assign(output, { [key]: source[key] });
            }
        });
    }
    return output;
}

export default class TabulatorPlus extends Tabulator {
    /**
     * @param {HTMLElement|string} el - The DOM element or selector to attach the table to.
     * @param {Object} userConfig - Custom Tabulator options provided by the user.
     * @param {string|null} storageKey - Unique ID for persistence (sorting, filtering, etc.).
     */
    constructor(el, userConfig = {}, storageKey = null) {
        // 1. Define organization-wide default settings
        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"
        };

        // 2. Perform Deep Merge to protect nested default settings
        const finalConfig = deepMerge(defaultConfig, userConfig);

        // 3. Initialize the parent Tabulator class
        super(el, finalConfig);
    }

    /**
     * Updates the table with a new dataset.
     * Using this method is preferred over re-initializing the whole class.
     * @param {Array} newData - The new array of objects to display.
     * @returns {Promise} - Resolves when data is loaded.
     */
    refreshData(newData) {
        if (newData && Array.isArray(newData)) {
            return this.setData(newData);
        }
        return Promise.reject("Invalid data format: Expected an Array.");
    }

    /**
     * Forces the table to recalculate its dimensions and redraw.
     * Useful when the table container size changes or after opening a modal.
     */
    forceRedraw() {
        this.redraw(true);
    }

    /**
     * Clears all active filters and header filters from the table.
     */
    resetFilters() {
        this.clearFilter(true);
        this.clearHeaderFilter();
    }
}

new TabulatorPlus("#table", {
    persistence: { sort: false } // ต้องการปิดแค่ sort อย่างเดียว
});

persistence: { sort: false } // filter และ page หายไป! เพราะโดนทับทั้งก้อน

persistence: {
    filter: true, // ยังอยู่ (จาก Default)
    page: true,   // ยังอยู่ (จาก Default)
    sort: false   // ถูกเปลี่ยนเฉพาะตัวนี้ (จาก User)
}