TabulatorPlus: Global Search

/** * 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]) ; }

const myTable = new TabulatorPlus ("#table", { /* config */ }) ; // เมื่อพิมพ์ในช่องค้นหา
$ ("#global-search-input") .on ("keyup", function () { const value = $ (this) .val () ; myTable.globalSearch (value) ;
}) ;

function MyTableComponent () { const tableRef = useRef (null) ; const instance = useRef (null) ; const handleSearch = (e) => { if (instance.current) { instance.current.globalSearch (e.target.value) ; } }; return ;
}

let searchTimer;
const onSearchInput = (e) => { clearTimeout (searchTimer) ; searchTimer = setTimeout ( () => { myTable.globalSearch (e.target.value) ; }, 300) ; // รอให้หยุดพิมพ์ 300ms ค่อยเริ่มค้นหา
};