Implementing Search Feature with ngHandsontable - handsontable

Question

I'm using handsontable on an angular app with ngHandsontable. I can see that I need to set search to true in the table settings, which should make a query method available.
Can someone explain how I am able to access that method through my angular controller?
<input class="" id="handsonSearch" placeholder="Search..." ng-model="searchQuery" />
<hot-table settings="tableSettings.settings"
datarows="mappingData"
col-headers="true"
height="700">
<hot-column data="Column1" title="'Column One'"></hot-column>
</hot-table>
Angular
function GlobalMappingController($scope) {
$scope.tableSettings = {
settings: {
contextMenu: true,
colHeaders: true,
dropdownMenu: true,
afterChange: afterChange,
beforeChange: beforeChange,
search: true,
query: $scope.searchQuery
}
};

Answer 1

The issue is access to the root handsOnTable instance created by ngHandsOnTable isn't as intuitive as you might think, but in order to access all the functions handsOnTable has by itself you have to do something like this.
First, declare the variable we'll use as the instance of the table
$scope.handsOnTable;
You can access the root for handsOnTable by setting the afterInit parameter in the settings array
$scope.tableSettings = {
settings: {
contextMenu: true,
colHeaders: true,
dropdownMenu: true,
afterChange: afterChange,
beforeChange: beforeChange,
search: true,
query: $scope.searchQuery,
//insert this
afterInit: function() {
$scope.handsOnTable = this;
}
}
};
You can then set an ng-change on the input to something like this:
function search() {
$scope.handsOnTable.search.query($scope.searchQuery);
$scope.handsOnTable.render();
}
You'll also need to, in the same manner as the afterInit, set afterchange with the same statement. If you've got your own custom version of the function then just put it in after everything else has ran.
Keep in mind you'll have to keep the input box bound to searchQuery and add onChange="search()" but that should work - at least it did for me.