Can I override just one table header and not all?

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!

[Jeremy-Walton]

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>

[vcmiranda]

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!!!