How to get Tabulator to populate a headerFilter ONLY when it is clicked - tabulator

Question

I'm using Tabulator with ajax to pull paginated data to the table. I'd like to use headerFilters with valuesURL but the AJAX request is a POST not a GET and valuesURL only works with GET. He alternative is to use values, but that seems to want to pull the values each time the data is refreshed. I need the headerFilter options to be refreshed ONLY when it the input box is clicked. Psuedo-process below...
Load all data
user clicks one headerFilter "City"
ajax called via POST to get list of relevant values for "City"
headerFilter is populated with list, which is then presented to the user via the drop down
Is this possible?
I've tried using a function in headerFilterParams to get the values but each headerFilter is refreshed when the data is refreshed as opposed to just the one that was clicked.

Answer 1

You can use the headerFilter in combination with a custom header filter component that makes the AJAX call to get the values when the header filter is clicked.
Example:
var cityFilter = function(headerValue, rowValue, rowData, filterParams){
// code to filter data based on selected city
};
// Custom header filter component
var customCityFilter = function(header) {
var self = this;
self.element = document.createElement("input");
self.element.setAttribute("type", "text");
self.element.setAttribute("placeholder", "Type to filter");
// Add click event to make the AJAX call when the input box is clicked
self.element.addEventListener("click", function() {
// Make the AJAX call to get the list of relevant values for "City"
// Replace with your own AJAX code
// Example using jQuery
$.ajax({
type: "POST",
url: "your_url",
data: {},
success: function(data) {
// Populate the headerFilter with the list of values
header.setFilterValues(data);
}
});
});
// Return the custom filter component
return self.element;
};
// Initialize the table with the custom header filter
var table = new Tabulator("#example-table", {
columns:[
{title:"City", field:"city", headerFilter:"custom", headerFilterParams:{component:customCityFilter}, headerFilterFunc:cityFilter},
// other columns
],
});