Filter key-value-list with text input Handsontable - handsontable

Question

first of all thank you for your time.
i need your help with handsontable (page oficial, documentation) . i am trying to create a filter for a custom type cell. key-value-list but i can only “filter” the already rendered data and i can’t re-render more data to always show all filtered data.
here is an example code
https://jsfiddle.net/crifesma/nusahc7p/50/
function BuscarEnSelect_hot(elemento) {
var text = $(elemento.TEXTAREA).val().toLowerCase();
if (text == "") {
for (item of elemento.htEditor.table.rows) {
item.hidden = false;
}
} else {
for (item of elemento.htEditor.table.rows) {
if (item.innerText.toLowerCase().includes(text)) {
item.hidden = false;
} else {
item.hidden = true;
}
}
}
}
/**
* The cell type adds supports for displaing the label value except the key in the key-value
* dropdown editor type.
*/
class KeyValueListEditor extends Handsontable.editors.HandsontableEditor {
prepare(row, col, prop, td, value, cellProperties) {
super.prepare(row, col, prop, td, value, cellProperties);
Object.assign(this.htOptions, {
licenseKey: 'non-commercial-and-evaluation',
data: this.cellProperties.source,
columns: [
{
data: '_id',
},
{
data: 'label',
},
],
hiddenColumns: {
columns: [1],
},
colWidths: cellProperties.width - 1,
beforeValueRender: function (value, {
row,
instance
}) {
return instance.getDataAtRowProp(row, 'label');},
beforeValueRender(value, { row, instance }) {
return instance.getDataAtRowProp(row, 'label');
},
});
if (cellProperties.keyValueListCells) {
this.htOptions.cells = cellProperties.keyValueListCells;
}
if (this.htEditor) {
this.htEditor.destroy();
}
this.htEditor = new Handsontable(this.htContainer, this.htOptions);
this.htEditor.rootElement.style.overflowX = "hidden";
//this.htEditor.rootElement.style.overflowY = "scroll";
this.htEditor.rootElement.style.height = this.htOptions.data.length < 11 ? td.clientHeight * this.htOptions.data.length + 7 + "px" : td.clientHeight * 10 + "px";
this.htEditor.rootElement.style.border = "1px solid #151414";
var w_alto = $(window).height();
var td_position = $(this.TD).offset();
this.htEditor.container.childNodes[0].style.width = td.clientWidth + "px";
this.htEditor.container.childNodes[0].style.maxWidth = td.clientWidth + "px";
this.htEditor.rootElement.style.maxWidth = td.clientWidth + "px";
if ((w_alto - td_position.top) < (td.clientHeight * 11)) {
this.htEditor.rootElement.style.top = ((td.clientHeight * 11) + 4) * -1 + "px"; //el + 2 es por los bordes
} else {
this.htEditor.rootElement.style.top = "";
}
var ddl = this;
$("textarea.handsontableInput").on("input", function (e) {
BuscarEnSelect_hot(ddl);
});
}
setValue(value) {
if (this.htEditor) {
const index = this.htEditor.getDataAtProp('_id').findIndex(id => id === value);
if (index !== -1) {
value = this.htEditor.getDataAtRowProp(index, 'label');
}
}
super.setValue(value);
}
getValue() {
const value = super.getValue();
if (this.htEditor) {
const labels = this.htEditor.getDataAtProp('label');
const row = labels.indexOf(value);
if (row !== -1) {
return this.htEditor.getDataAtRowProp(row, '_id');
}
}
return value;
}
}
const keyValueListValidator = function(value, callback) {
let valueToValidate = value;
if (valueToValidate === null || valueToValidate === void 0) {
valueToValidate = '';
}
if (this.allowEmpty && valueToValidate === '') {
callback(true);
} else {
callback(this.source.find(({ _id }) => _id == value) ? true : false);
}
};
const keyValueListRenderer = function(hot, TD, row, col, prop, value, cellProperties) {
const item = cellProperties.source.find(({
_id
}) => _id === value);
if (item) {
value = item.label;
}
Handsontable.renderers.getRenderer('autocomplete').call(hot, hot, TD, row, col, prop, value, cellProperties);
};
Handsontable.cellTypes.registerCellType('key-value-list', {
editor: KeyValueListEditor,
validator: keyValueListValidator,
renderer: keyValueListRenderer,
});
const example = document.getElementById('example');
const hot = new Handsontable(example, {
data: Handsontable.helper.createSpreadsheetData(10, 10),
colWidths: 100,
width: '100%',
height: 320,
rowHeights: 23,
rowHeaders: true,
colHeaders: true,
afterChange(changes) {
if (!changes) {
return;
}
console.log(this.getDataAtCell(changes[0][0], changes[0][1]));
},
type: 'key-value-list',
source: [
{_id: 1, label: '101 | Mike'},
{_id: 2, label: '102 | Roman'},
{_id: 3, label: '103 | Juan'},
{_id: 4, label: '104 | Mike'},
{_id: 5, label: '105 | Roman'},
{_id: 6, label: '106 | Juan'},
{_id: 7, label: '107 | Mike'},
{_id: 8, label: '108 | Roman'},
{_id: 9, label: '109 | Juan'},
{_id: 10, label: '110 | Mike'},
{_id: 11, label: '111 | Roman'},
{_id: 12, label: '112 | Juan'},
{_id: 13, label: '113 | Mike'},
{_id: 14, label: '114 | Roman'},
{_id: 15, label: '115 | Juan'},
{_id: 16, label: '116 | Mike'},
{_id: 17, label: '117 | Roman'},
{_id: 18, label: '118 | Juan'},
{_id: 19, label: '119 | Mike'},
{_id: 20, label: '120 | Roman'},
{_id: 21, label: '121 | Juan'},
]
});
.wtHider{
width:200px !important;
}
.handsontableInputHolder .wtSpreader .htCore{
width:200px !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/handsontable#latest/dist/handsontable.full.min.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable#latest/dist/handsontable.full.min.css" />
<div id="example"></div>