ngTable filter customization to a single inputText above the table - angularjs

Question

How do I use ngTable with a custom filter inputText, that is common to all the columns ? I know ngTable filter can be turned off to not show the inputText boxes above the column, but I want to have a single inputText placed above the table or outside the table, when any value entered, it will be filtered across all the columns.
Appreciate any help.
TIA.
Here is my code, I use a hidden column that consist of all the values across the row. This is not perfect.
$scope.ngTableData =[
{"colAB": "testA1testB1", "colA": "testA1", "colB": "testB1"},
{"colAB": "testA2testB2", "colA": "testA2", "colB": "testB2"},
{"colAB": "testA3testB3", "colA": "testA3", "colB": "testB3"},
{"colAB": "testA4testB4", "colA": "testA4", "colB": "testB4"},
{"colAB": "testA5testB5", "colA": "testA5", "colB": "testB5"},
{"colAB": "testA12testB12", "colA": "testA12", "colB": "testB12"},
{"colAB": "testA13testB13", "colA": "testA13", "colB": "testB13"},
{"colAB": "testA14testB14", "colA": "testA14", "colB": "testB14"}
] ;
$scope.filter= {
colAB: undefined
};
var dataArr = $scope.ngTableData.length;
$scope.userTable = new NgTableParams({
page: 1,
count: 5,
filter: $scope.filter
}, {
total: $scope.ngTableData.length,
getData: function ($defer, params) {
var orderedData = params.sorting() ?
$filter('orderBy')($scope.ngTableData, params.orderBy()) : $scope.ngTableData;
orderedData =
$filter('filter')(orderedData, params.filter());
params.total(orderedData.length);
defer.resolve(
orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count())
);
}
});
<label>Search: </label>
<input ng-model="filter.colAB">
<table ng-table="userTable" show-filter="false" class="table table-striped">
<tr ng-repeat="user in $data ">
<td data-title="'Col A'" sortable="'colA'" filter='{ "colA": "text" }'>
{{user.colA}}
</td>
<td data-title="'Col B'" sortable="'colB'" filter="{ 'colB': 'text' }">
{{user.colB}}
</td>
<td filter='{ "colAB": "text" }' ng-if="false">
{{user.colAB}}
</td>
</tr>
</table>

Answer 1

You can supply an object with a property named $ with the value of your global filter to the method filter() of the instance of NgTableParams. Look at the example snippet below:
var app = angular.module("myApp", ["ngTable"]);
app.controller('DemoCtrl', function($scope, NgTableParams) {
var data = [
{name:'Ana', age:12, money:38945, country:'pan'},
{name:'Ric', age:34, money:34945, country:'cr'},
{name:'Rob', age:76, money:34845, country:'col'},
{name:'Stu', age:23, money:34895, country:'ven'},
{name:'Amy', age:22, money:34894, country:'usa'},
{name:'Jay', age:77, money:34895, country:'mex'}
];
$scope.tableParams = new NgTableParams({}, {dataset: data});
// For use with global search button
$scope.makeGlobalSearch = function() {
var term = $scope.globalSearchTerm;
/** L##K HERE **/
$scope.tableParams.filter({ $: term });
};
// Watcher for global search without button
$scope.$watch('globalSearchTermAuto', function(newTerm, oldTerm) {
/** L##K HERE **/
$scope.tableParams.filter({ $: newTerm });
}, true);
});
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://rawgit.com/esvit/ng-table/master/dist/ng-table.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://rawgit.com/esvit/ng-table/master/dist/ng-table.min.js"></script>
<div ng-app="myApp" class="container-fluid">
<div class="row" ng-controller="DemoCtrl">
<div class="col-xs-12">
<!-- GLOBAL FILTER -->
<form name="searchForm" novalidate>
<h3>Global search with button</h3>
<div class="input-group">
<input ng-model="globalSearchTerm"
type="text"
class="form-control"
placeholder="Search term"
name="searchTerm"
required />
<span class="input-group-btn">
<button ng-click="makeGlobalSearch()"
class="btn btn-default"
ng-disabled="demo.searchForm.$invalid">
<span class="glyphicon glyphicon-search"></span>
</button>
</span>
</div>
<h3>Global search without button</h3>
<div>
<input ng-model="globalSearchTermAuto"
type="text"
class="form-control"
placeholder="Search term"
name="searchTerm"
required />
</div>
</form>
<!-- NG TABLE -->
<h3>ngTable directive</h3>
<table ng-table="tableParams" class="table table-condensed table-bordered table-striped">
<tr ng-repeat="row in $data">
<td data-title="'Name'" filter="{name: 'text'}">{{row.name}}</td>
<td data-title="'Age'" filter="{age: 'number'}">{{row.age}}</td>
<td data-title="'Money'" filter="{money: 'number'}">{{row.money}}</td>
<td data-title="'Country'" filter="{country: 'text'}">{{row.country}}</td>
</tr>
</table>
</div>
</div>
</div>