Skip to content

Instantly share code, notes, and snippets.

@sahanh
Created September 6, 2014 12:14
Show Gist options
  • Save sahanh/8dda94cbca473ec71f48 to your computer and use it in GitHub Desktop.
Save sahanh/8dda94cbca473ec71f48 to your computer and use it in GitHub Desktop.
Using custom header in ng template
<table ng-table="tableParams" template-pagination="pagination" template-header="header" show-filter="false" class="table">
..
<script type="text/ng-template" id="header">
<ul class="btn-group pagination ng-table-pagination">
<li ng-class="{'disabled': !page.active}" ng-repeat="page in pages" ng-switch="page.type">
<a class="btn btn-xs btn-default" ng-switch-when="prev" ng-click="params.page(page.number)" href="">&laquo;</a>
<a class="btn btn-xs btn-default" ng-switch-when="first" ng-click="params.page(page.number)" href=""><span ng-bind="page.number"></span></a>
<a class="btn btn-xs btn-default" ng-switch-when="page" ng-click="params.page(page.number)" href=""><span ng-bind="page.number"></span></a>
<a class="btn btn-xs btn-default" ng-switch-when="more" ng-click="params.page(page.number)" href="">&#8230;</a>
<a class="btn btn-xs btn-default" ng-switch-when="last" ng-click="params.page(page.number)" href=""><span ng-bind="page.number"></span></a>
<a class="btn btn-xs btn-default" ng-switch-when="next" ng-click="params.page(page.number)" href="">&raquo;</a>
</li>
</ul>
<tr>
<th ng-repeat="column in $columns"
ng-class="{
'sortable': parse(column.sortable),
'sort-asc': params.sorting()[parse(column.sortable)]=='asc',
'sort-desc': params.sorting()[parse(column.sortable)]=='desc'
}"
ng-click="sortBy(column, $event)"
ng-show="column.show(this)"
ng-init="template = column.headerTemplateURL(this)"
class="header {{column.class}}">
<div ng-if="!template" ng-show="!template" ng-bind="parse(column.title)"></div>
<div ng-if="template" ng-show="template"><div ng-include="template"></div></div>
</th>
</tr>
<tr ng-show="show_filter" class="ng-table-filters">
<th ng-repeat="column in $columns" ng-show="column.show(this)" class="filter">
<div ng-repeat="(name, filter) in column.filter">
<div ng-if="column.filterTemplateURL" ng-show="column.filterTemplateURL">
<div ng-include="column.filterTemplateURL"></div>
</div>
<div ng-if="!column.filterTemplateURL" ng-show="!column.filterTemplateURL">
<div ng-include="'ng-table/filters/' + filter + '.html'"></div>
</div>
</div>
</th>
</tr>
</script>
@tucq88
Copy link

tucq88 commented Dec 28, 2015

Sorry but I was unable to display the header. I don't understand what $columns is. Could you please explain this ?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment