Hi,
Can I override just one table header and not all? I want a sortable table with a custom first column (a fancy checkbox first column). Right now all the logic in the sorting is in tbody > tr. I do not have thead > th and this is how my code looks like:
<tbody>
<tr ng-repeat="foo in fooList">
<td data-title="'Name'" class="" data-sortable="'name'">
And now my code looks like this
<thead>
<!--custom first column header-->
<!--boilerplate header-->
<th ng-class="{
'sort-asc': tableParams.isSortBy('name', 'asc'),
'sort-desc': tableParams.isSortBy('name', 'desc')
}"
ng-click="tableParams.sorting({'name' : tableParams.isSortBy('name', 'asc') ? 'desc' : 'asc'})">
<div>Name</div>
</th>
<!--the rest of the column definitions which are similar to the previous one-->
</thead>
<tbody>
<!--custom first column data-->
<tr ng-repeat="foo in fooList">
<td data-title="'Name'" class="" data-sortable="'name'">
I did so because I followed this example: http://bazalt-cms.com/ng-table/example/18
Is there any way I can have a simple default sortable column (like I used to have in my first example) and have custom stuff only in the first one? I have lots of columns and the boilerplate sortable stuff complicates my code a lot and it is not DRY.
A workaround is to make my own custom directive for the header but I was hoping there is a simpler solution.
Thank you!
Yes you can.
Create a simple custom template like so:
<script id="expandAllHeader" type="text/ng-template">
<span class="expandable" ng-click="toggleExpandAll()">+ / -</span>
</script>
Then define your special column like this:
<td header="'expandAllHeader'">...</td>
... instead of this:
<td data-title="'whatever'">...</td>
Thank you @Jeremy-Walton! I did not made a full implementation yet, just a small example and it seems to work :P I will take a look more at how ng-table is using it so I can make my own example for my specific case. https://github.com/esvit/ng-table/search?utf8=%E2%9C%93&q=type%3D%22text%2Fng-template%22
How can I pass a variable inside? I have something like this:
<script id="expandAllHeader" type="text/ng-template">
<div>{{this.title}}</div>
<div>{{this.sorting}}</div>
</script>
<td data-title="'Name'" data-sortable="'name'" header="'expandAllHeader'"></td>
Anything you put in the header will be executed in the same scope as the rest of your table, outside of the body loop. See https://github.com/esvit/ng-table/blob/master/src/ng-table/header.html#L16 and https://docs.angularjs.org/api/ng/directive/ngInclude.
Instead of using this.whatever
, you should use whatever
.
Thank you!
For posterity :P This worked for me:
<script id="expandAllHeader" type="text/ng-template">
<div>{{column.title()}}</div>
<div>{{column.sortable()}}</div>
</script>
<table ng-table="tableParams">
<tbody>
<td data-title="'First Name'" data-sortable="'firstname'" header="'expandAllHeader'"></td>
<td data-title="'Last Name'" data-sortable="'lastname'" header="'expandAllHeader'"></td>
Yes you can.
Create a simple custom template like so:
<script id="expandAllHeader" type="text/ng-template"> <span class="expandable" ng-click="toggleExpandAll()">+ / -</span> </script>
Then define your special column like this:
<td header="'expandAllHeader'">...</td>
... instead of this:
<td data-title="'whatever'">...</td>
Wonderful. Still useful!!!
Most helpful comment
Yes you can.
Create a simple custom template like so:
Then define your special column like this:
... instead of this: