Creating a Header Filter in Tabulator for Choice Field that Can Accept Multiple Values

Question

I'm hoping for some guidance on how to construct a headerFilter in Tabulator for the following situation. One of the columns of data that will be displayed via Tabulator is a multi-choice column. One or more values can be entered. For example, there are a choice of 3 colors (red, green and blue) and in one record both red and green can be selected.

I am displaying each choice on its own line in the same cell.

I have created a select headerFilter to filter this field, but that filter applies to the entire cell value. I would like to create a pick list of just the individual values (red, green and blue) and if I select a filter value like "red" then it will match any cell that contains red as one of the selected values, like a cell with both red and green. I don't want to make this work as a wildcard or substring value, because one choice could contain the text of another, like if I added the color "light blue" to my list, I don't want selecting "blue" to match that.

There seem to be 2 parts to this answer, how the data is stored for each cell (in an array?) and the filter logic.

Answer 1

There are two simple methods for doing this:

Storing Data As An Array

you could manage this by storing the colour data for each row in an array, lets for example assume this is stored in the colours property in a row data object, the example row data might look like this

var rowdata = [
    {colours:["red, green"]}
]

You could then define your select editor, and use the in header filter function to check that the value is in the array, so your column definition for that column may lok a bit like this:

{title:"Colours", field:"colours", headerFilter:"select", headerFilterParams:{values:["red", "green", "blue"]}, headerFilterFunction:"in"},

When you select your value from the list of red, green or blue it will then filter for rows that have colours property that contains that string in the array

Storing Data As A String List

you could manage this by storing the colour data for each row in an string of space sperated values, lets for example assume this is stored in the colours property in a row data object, the example row data might look like this

var rowdata = [
    {colours:"red green"}
]

You could then define your select editor, and use the keywords header filter function to check that the value is in the string list, so your column definition for that column may lok a bit like this:

{title:"Colours", field:"colours", headerFilter:"select", headerFilterParams:{values:["red", "green", "blue"]}, headerFilterFunction:"keywords"},

When you select your value from the list of red, green or blue it will then filter for rows that have colours property that contains that string in the string list

Answer 2

https://jsfiddle.net/0p6L4ya1/

I think this is what you're looking for ? I would use a bitmask with a numeric flag to keep track of whether it's on or off for multiple colors (limitation of 32 colors, Im guessing for javascript, maybe 64 ??)

You can add 'lightblue' to the colors array to get your new match, and it will match left[Eight], coz 8 = 1<<4

const colors = ['red','green','blue','lightblue'];