How to concatenate fields in Tabulator, while retaining header search? - concatenation

Question

We need to be able to concatenate multiple fields into a single Tabulator column. This in of itself is easy enough, but we want to also be able to use the column search function to search for ANY of the values that have been inserted.
Using the mutate function of course breaks Tabulators ability to distinguish one original value from any other.
We've got around this by having Tabulator modify our data source dynamically (dynamically regenerating the datasource query) but this is of course not the ideal solution.
I'm wondering if anyone else has run into this and found a built-in solution?
EG: Column "NAME" contains the concatenation of "firstname, lastname". We need to be able to use the column filter to search either the firstname or lastname, but through mutation/concatenation, we are now forced to search firstname first instead of lastname.

Answer 1

You could use a custom filter function to perform the search. In the below example, I have used the header filter, but it could be an external search input as well. My example has firstName and lastName columns concatenated as Lastname, Firstname in the name column. By using the headerFilterFunc column definition property, you could return search results that match either first name or last name:
const dataSet1 = [
{ firstName: 'Billy', lastName: 'Bob', age: '12', gender: 'male' },
{ firstName: 'Mary', lastName: 'May', age: '1', gender: 'female' },
{ firstName: 'Christine', lastName: 'Lobowski', age: '42', gender: 'female' },
{ firstName: 'Brendon', lastName: 'Philips', age: '25', gender: 'male' },
{ firstName: 'Margret', lastName: 'Marmajuke', age: '76', gender: 'female' }
]
const table = new Tabulator('#table', {
data: dataSet1,
columns: [
{
title: 'Name',
field: 'name',
mutator: (value, data) => data.lastName + ', ' + data.firstName,
headerFilter: 'input',
headerFilterFunc: (headerValue, rowValue, rowData, filterParams) => {
let filterValue = headerValue.toUpperCase()
let firstName = rowData.firstName.toUpperCase()
let lastName = rowData.lastName.toUpperCase()
return firstName.includes(filterValue) || lastName.includes(filterValue)
}
},
{ title: 'Age', field: 'age' },
{ title: 'Gender', field: 'gender' }
]
})
<link href="https://unpkg.com/tabulator-tables#5.1.8/dist/css/tabulator.min.css" rel="stylesheet">
<script type="text/javascript" src="https://unpkg.com/tabulator-tables#5.1.8/dist/js/tabulator.min.js"></script>
<div id="table"></div>