Tabulator Global Search Across Multiple Columns

Question

We've moved, on one of our pages, from using a datatable to using tabulator.

We have a 'global search input' at the top of the page which currently searches the datatable on the page, where if a like match is made in any column, it redraws the table.

I'm trying to achieve the same in tabulator, however, when I add the second column and the OR statement, the table show's blank on enter.

Removing the second field, 'uniqueID' the search works on the event title as before.

Any help in getting this so, if the search shows the rows if ANY of the columns match in a like state?

 var opt = $('#cf_header_search_option').val(); 

 if (opt == 'grid') {
  if (type !== 'tabulator') {
   cfHeader_searchDataGrid ( dataTable );
  } else {

   var searchValue = $('#header_search_query').val().trim().toLowerCase();
   table.setFilter([
    { field: 'event_title', headerFilter: true, type: 'like', value: searchValue },
    { field: 'uniqueID', headerFilter: true, type: 'like', value: searchValue },
                   ]);
  }
 } else {
  $('#cf_header_search_form').submit();
  return true;
 }          
}

Answer 1

Solution was the put a [] on the setfilter.

table.setFilter([[
                  { field: 'event_title', headerFilter: true, type: 'like', value: searchValue },
                  { field: 'uniqueID', headerFilter: true, type: 'like', value: searchValue },
               ]]);

Answer 2

This code lets you search all columns at the same time. As you define new columns, it dynamically generates the corresponding filters for you. You can specify certain columns to ignore during a search. As the user types into the search bar, results are returned instantly.

<input id="searchBar" type="text" placeholder="Search">
<div id="tableContainer></div>

const columns = [
    { title: "Column 1", field: "data1" },
    { title: "Column 2", field: "data2" },
    // ... 
];

const tableOptions = {
    data: myDataSource,
    columns: columns,
};

myTabulatorTable = new Tabulator("#tableContainer", tableOptions);
        
const columnFields = columns.map(column => column.field);

// OPTIONAL - These columns will not be searched.
// If you want to search all columns, set to [].
const ignoreColumns = ["data3", "data4"] 

const searchFields = columnFields.filter(field => !ignoreColumns.includes(field))

const searchBar = document.getElementById("searchBar");

searchBar.addEventListener("input", function () {
    // Capitalization does not affect search results, but white space does.
    var searchValue = searchBar.value.trim();

    // Allows searching in multiple columns at the same time
    var filterArray = searchFields.map((field) => {
        // You can customize the properties here
        return { field: field, type: 'like', value: searchValue };
    });

    myTabulatorTable.setFilter([filterArray])
});