Tabulator: Instant Search Capability

[YendorMc]

Is your feature request related to a problem? Please describe.
https://www.datatables.net/ has a Instant Search Capability that I would like to see implemented in tabulator. This provides a single input box which then searches all columns that matches the same data.

Describe the solution you'd like
Would like to have a single solution that searches text across all columns/rows at one time.
Alternatively, if functionality is there, suggestions would be appreciated.

Describe alternatives you've considered
Search Each Columns Separately

Additional context
See: https://www.datatables.net/

[olifolkerd]

Hey @YendorMc

Thanks for the suggestion, i deliberately avoid adding any "header" elements as i feel they impose too much of a design atheistic on the developer and i prefer to keep things open for people to choose how to filter their data and where to place filter elements on their page..

On the plus side it is really easy to do this yourself, and to make life easier on people i will add this as an example on the website,

if you add your own input element:

<input type="text" id="filter"/>

then add an event to the keyup or change event on that input, that builds a complex OR filter for each of the columns and runs the search:

var input = document.getElementById("filter");

input.addEventListener("keyup", function(){
    var filters = [];
    var columns = table.getColumns();
    var search = input.value;

    columns.forEach(function(column){
        filters.push({
            field:column.getField(),
            type:"like",
            value:search,
        });
    });

    table.setFilters([filters]);
}

Let me know if that is what you are after.

Cheers

Oli :)

[YendorMc]

Wow! Ole, My apologizes...I should have known better! You Are The BatMan!

[kenseii]

Hello, this doesnt seem to work on the new version, it searches on keyup but still returns the content of the whole table. Is there another way of doing it?

[olifolkerd]

Hey @kenseii

If you believe there is a problem with the latest version could you please create a JS fiddle that replicates your problem and create a new issue.

It is very hard to offer advice without knowing how your table is setup.

Cheers

Oli :)

[kenseii]

Hello, sorry for replying late, i tried implementing a search feature(search all rows and columns) using tabulator filter examples and the above mentioned example, when i search(keyup) it sort of refreshes the table but doesnt show only the element having that word; neither shows nothing once there is no matching word.

everytime it shows the elements which were shown without the search.
I am using the latest version tabulator. is it a common issue ?

[YendorMc]

Just an update for those looking - same code different function...
`
var input = document.getElementById("filter");

input.addEventListener("keyup", function(){
var filters = [];
var columns = table.getColumns();
var search = input.value;

columns.forEach(function(column){
    filters.push({
        field:column.getField(),
        type:"like",
        value:search,
    });
});

table.setFilter([filters]); //updated here
}
`