Filtering with inputs on header

Tags: #<Tag:0x00007fce69306eb8>

I followed the tutorial on documentations " Custom implementations", to include inputs on the header to filter. What worked fine initially.

Problem started when user open in a smaller screen, laptop for example, where is necessary to scroll horizontally to check some columns.

I type some value and try to scroll horizontally, some times this jumps to another input, some times another column is sorted. I try to include inputs in half of columns, but after scrolling horizontally 1 extra input appeared where there wasn’t.

I may try to exprain here how to test on my own web site, but it’s in pt-BR.

Hi Eduardo,
Our example in filters for “Custom implementation” is just a simple implementation and does not support virtual rendering.
You have to add a sort-of cache to track values in those custom headers, e.g., on the input event. Then you can put the current value from the input element for a particular column during the afterGetColHeader listener.

I think I found a solution (at least seems to, I’ll check with more use)

VueJS and following your documentation.

data() {
return {
divsFilterSource: [],

getInitializedElements(colIndex) {
let div = this.divsFilterSource[colIndex];
if (!div) {
// documentation code
this.divsFilterSource[colIndex] = div;
return div;


// last line inside this function;

I could even include inside beforeKeyDown:
so that when user press “*”, it goes to the input.

I can share the code with you, so that you can implement in your documentation, if you want.

I’m glad you found a solution. Remember to transform indexes between all layers: renderable <-> visual <-> physical.
These layers might contain different indexes after transformations such as moving or hiding.

Thank you for your offer! Your involvement means a lot to us!
In case we work on change the filtering guide, we will consider your example.