การเพิ่ม Global Search เข้าไปใน TabulatorPlus เป็นฟีเจอร์ที่ยอดเยี่ยมมากครับ เพราะโดยปกติ Tabulator จะกรองข้อมูลแยกตามคอลัมน์ แต่การมี “ช่องค้นหาเดียวที่ค้นทุกอย่าง” จะช่วยให้ User Experience (UX) ดีขึ้นมาก
🛠 เพิ่ม Method ใน TabulatorPlus.js
JavaScript
/** * 4. Global Search Method * Filters the table across multiple columns based on a single search string. * @param {string} searchTerm - The string to search for. * @param {Array} columnsToSearch - Optional array of field names to search in. * If empty, it will search all visible columns. */ globalSearch (searchTerm, columnsToSearch = []) { // If search term is empty, clear all filters if (!searchTerm || searchTerm.trim () === "") { this.clearFilter () ; return; } // Get all column definitions if no specific columns provided const cols = columnsToSearch.length > 0 ? columnsToSearch : this.getColumnDefinitions () .filter (col => col.field) // Only columns with data fields .map (col => col.field) ; // Build a filter array for Tabulator (using OR logic) const filterArray = cols.map (field => { return { field: field, type: "like", value: searchTerm }; }) ; // Apply the filter using Tabulator's setFilter with 'OR' logic // We pass the array of filters as the first argument to treat it as an 'OR' group this.setFilter ([filterArray]) ; }