lubasictable filter transclude

src/lubasictable.js

                 scope: {
                     options: '&'
                 },
+                transclude: {
+                    'lu-basic-table-filter': '?lu-basic-table-filter'
+                },
                 templateUrl: "/luticate/lubasictable.html",
                 link: function ($scope, element, attrs) {
                     $scope.items = [];
 
 angular.module('luticateUtils').run(['$templateCache', function($templateCache)
 {
-    $templateCache.put('/luticate/lubasictable.html', '<div lu-busy="tableOptions.luBusy">' +
-'<div class="col-sm-3 pull-right" ng-show="tableOptions.canFilter()"><input placeholder="Filter" class="form-control" ng-model-options="{debounce: 500}" ' +
-        'ng-model="tableOptions.query" ng-change="loadPage(0)"/></div>' +
-'        <table class="col-sm-12 table table-hover">' +
-'    <thead>' +
-'    <tr>' +
-'    <th ng-show="tableOptions.canCheck()">' +
-'    <input type="checkbox" ng-click="toggleCheckAll()"' +
-'    ng-checked="tableOptions.checkedItems.length == items.Data.length && items.Data.length != 0">' +
-'        </th>' +
-'        <th class="col-sm-{{ col.width }}" ng-repeat="col in tableOptions.columns">{{ col.name }}</th>' +
-'</tr>' +
-'</thead>' +
-'<tbody>' +
-'<tr ng-repeat="item in items.Data" ng-style="{\'cursor\': tableOptions.canClick(item) ? \'pointer\' : \'\'}" ng-click="onItemClicked(item)">' +
-'    <td ng-show="tableOptions.canCheck()">' +
-'    <input name="tableOptions.checkedItems[]" type="checkbox" ng-checked="isItemChecked(item)"' +
- '   ng-click="$event.stopPropagation();toggleCheckedItem(item)" >' +
-'        </td>' +
-'        <td ng-repeat="col in tableOptions.columns">{{ col.getValue(item) }}</td>' +
-'</tr>' +
-'</tbody>' +
-'</table>' +
-
-        '<div class="col-sm-12 text-center">' +
-'<div class="pagination"><ul>' +
-'    <li class="previous">' +
-'        <a href="" class="fui-arrow-left" ng-click="loadPage(tableOptions.page - 1)"></a></li>' +
-'    <li ng-repeat="p in pages" ng-class="{ \'active\' : p == tableOptions.page}">' +
-'        <a href="" ng-click="loadPage(p)">{{ p + 1 }}</a></li>' +
-'    <li class="next">' +
-'        <a href="" class="fui-arrow-right" ng-click="loadPage(tableOptions.page + 1)"></a></li>' +
-'</ul></div></div>' +
-'    </div>');
+    $templateCache.put('/luticate/lubasictable.html',
+'<div lu-busy="tableOptions.luBusy">' +
+'    <div class="col-sm-9"><ng-transclude ng-transclude="lu-basic-table-filter"></ng-transclude></div>' +
+'    <div class="col-sm-3" ng-show="tableOptions.canFilter()"><input placeholder="Filter" class="form-control" ng-model-options="{debounce: 500}" ' +
+'       ng-model="tableOptions.query" ng-change="loadPage(0)"/></div>' +
+'    <table class="col-sm-12 table table-hover">' +
+'       <thead>' +
+'           <tr>' +
+'               <th ng-show="tableOptions.canCheck()">' +
+'                   <input type="checkbox" ng-click="toggleCheckAll()"' +
+'                       ng-checked="tableOptions.checkedItems.length == items.Data.length && items.Data.length != 0">' +
+'               </th>' +
+'               <th class="col-sm-{{ col.width }}" ng-repeat="col in tableOptions.columns">{{ col.name }}</th>' +
+'           </tr>' +
+'       </thead>' +
+'       <tbody>' +
+'           <tr ng-repeat="item in items.Data" ng-style="{\'cursor\': tableOptions.canClick(item) ? \'pointer\' : \'\'}" ng-click="onItemClicked(item)">' +
+'               <td ng-show="tableOptions.canCheck()">' +
+'                   <input name="tableOptions.checkedItems[]" type="checkbox" ng-checked="isItemChecked(item)"' +
+'                       ng-click="$event.stopPropagation();toggleCheckedItem(item)" >' +
+'               </td>' +
+'               <td ng-repeat="col in tableOptions.columns">{{ col.getValue(item) }}</td>' +
+'           </tr>' +
+'       </tbody>' +
+'   </table>' +
+'   <div class="col-sm-12 text-center">' +
+'       <div class="pagination"><ul>' +
+'           <li class="previous">' +
+'               <a href="" class="fui-arrow-left" ng-click="loadPage(tableOptions.page - 1)"></a></li>' +
+'           <li ng-repeat="p in pages" ng-class="{ \'active\' : p == tableOptions.page}">' +
+'               <a href="" ng-click="loadPage(p)">{{ p + 1 }}</a></li>' +
+'           <li class="next">' +
+'               <a href="" class="fui-arrow-right" ng-click="loadPage(tableOptions.page + 1)"></a></li>' +
+'   </ul></div></div>' +
+'</div>');
 }]);

src/luedittable.js

                 scope: {
                     options: '&'
                 },
+                transclude: {
+                    'lu-basic-table-filter': '?lu-basic-table-filter'
+                },
                 templateUrl: "/luticate/lutable.html",
                 link: function ($scope, element, attrs) {
 
 angular.module('luticateUtils').run(['$templateCache', function($templateCache)
 {
     $templateCache.put('/luticate/lutable.html',
-'        <lu-basic-table options="tableOptions"></lu-basic-table>' +
+'<lu-basic-table options="tableOptions"><lu-basic-table-filter><ng-transclude ng-transclude="lu-basic-table-filter"></ng-transclude></lu-basic-table-filter></lu-basic-table>' +
 '<div class="col-sm-12">' +
 '    <button class="btn btn-danger" type="button" ng-click="deleteItems()"' +
-'ng-disabled="tableOptions.checkedItems.length == 0" ng-show="tableOptions.canDel()">' +
-'    <span class="glyphicon glyphicon-remove" aria-hidden="true"></span> Delete' +
+'       ng-disabled="tableOptions.checkedItems.length == 0" ng-show="tableOptions.canDel()">' +
+'       <span class="glyphicon glyphicon-remove" aria-hidden="true"></span> Delete' +
 '    </button>' +
 '    <button class="btn btn-primary" type="button" ng-click="tableOptions.addItem()" ng-show="tableOptions.canAdd()">' +
-'    <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> Add' +
+'       <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> Add' +
 '    </button>' +
-'    </div>');
+'</div>');
 }]);