Tabulator: headerFilter for Multiple values

Created on 22 Aug 2017 · 2Comments · Source: olifolkerd/tabulator

Hi all,

I have succeeded in adding a select headerFilter to my table, however it can only filter for one value. I am looking to add a filter for a list of countries, where the user can filter based on more than one country, e.g. the user could filter observations for India, Australia and Poland, instead of just India.

Is there any way to achieve this? I've looked at issue #147 but havent been able to get it to work for the updated Tabulator js.

This is an example of my js code, but I am using the year column as an example (too many countries):

All 2 comments

Hey,

you could use a standard input element filter, and allow the user to enter a comma delimited list, then use a custom filter function to look for any item in the list:

//custom filter function
function matchAnyFilter(headerValue,cellValue, rowData, filterParams){
    //headerValue - the value of the header filter element
    //cellValue- the value of the column in this row
    //rowData - the data for the row being filtered
    //filterParams - params object passed to the headerFilterFuncParams property

    var matched = false;
    var values = headerValue.split(","); //break header into list of options

    values.forEach(function(val){
        if(val.toLowerCase().indexOf(cellValue.toLowerCase()) > -1){
            matched = true;
        }
    });

    return matched;
}

//column definition
{title:"Country Name", field:"contname", sorter:"string", width:200, headerFilter:"input", headerFilterFunc:matchAnyFilter },

let me know if that helps,

Cheers

Oli