1<table class="bmc-table {{$ctrl.size}}">
2  <thead class="bmc-table__head">
3    <!-- Header row (non-sortable) -->
4    <tr ng-if="!$ctrl.sortable">
5      <th ng-repeat="headerItem in $ctrl.header"
6          class="bmc-table__column-header">
7        {{headerItem.label}}
8      </th>
9    </tr>
10    <!-- Header row (sortable) -->
11    <tr ng-if="$ctrl.sortable">
12      <th ng-repeat="headerItem in $ctrl.header track by $index"
13          class="bmc-table__column-header">
14        <span ng-if="!headerItem.sortable">
15          {{headerItem.label}}
16        </span>
17        <span ng-if="headerItem.sortable"
18              ng-click="$ctrl.onClickSort($index)"
19              class="bmc-table__column-header--sortable">
20          {{headerItem.label}}
21          <!-- Sort icons -->
22          <button class="sort-icon"
23                  type="button"
24                  aria-label="sort {{headerItem.label}}">
25            <icon file="icon-arrow--up.svg"
26                  ng-if="$index === $ctrl.activeSort"
27                  ng-class="{
28                    'sort-icon--descending': !$ctrl.sortAscending,
29                    'sort-icon--ascending' : $ctrl.sortAscending }"
30                  class="sort-icon--active"
31                  aria-hidden="true"></icon>
32            <span ng-if="$index !== $ctrl.activeSort"
33                  class="sort-icon--inactive"
34                  aria-hidden="true">
35                <icon file="icon-arrow--up.svg"></icon>
36                <icon file="icon-arrow--down.svg"></icon>
37            </span>
38          </button>
39        </span>
40      </th>
41    </tr>
42  </thead>
43  <tbody class="bmc-table__body">
44    <!-- Data rows -->
45    <tr ng-if="$ctrl.data.length > 0"
46        ng-repeat-start="row in $ctrl.data track by $index"
47        class="bmc-table__row"
48        ng-class="{
49          'bmc-table__row--expanded': $ctrl.expandedRows.has($index)
50        }">
51      <!-- Row expansion trigger -->
52      <td ng-if="$ctrl.expandable"
53          class="bmc-table__cell">
54        <button type="button"
55                class="btn  btn--expand"
56                aria-label="expand row"
57                ng-click="$ctrl.onClickExpand($index)">
58          <icon file="icon-chevron-right.svg" aria-hidden="true"></icon>
59        </button>
60      </td>
61      <!-- Row item -->
62      <td ng-repeat="item in row.uiData track by $index"
63          class="bmc-table__cell">
64          <ng-bind-html ng-bind-html="item"></ng-bind-html>
65      </td>
66      <!-- Row Actions -->
67      <td ng-if="$ctrl.rowActionsEnabled"
68          class="bmc-table__cell  bmc-table__row-actions">
69        <table-actions
70          actions="row.actions"
71          emit-action="$ctrl.onEmitTableAction(action, row)">
72        </table-actions>
73      </td>
74    </tr>
75    <!-- Expansion row -->
76    <tr ng-repeat-end
77        ng-if="$ctrl.expandedRows.has($index)"
78        class="bmc-table__expansion-row">
79      <td class="bmc-table__cell"></td>
80      <td class="bmc-table__cell"
81          colspan="{{$ctrl.header.length - 1}}">
82        <ng-bind-html
83          ng-bind-html="row.expandContent || 'No data'">
84        </ng-bind-html>
85      </td>
86    </tr>
87    <!-- Empty table -->
88    <tr ng-if="$ctrl.data.length === 0"
89        class="bmc-table__expansion-row">
90      <td class="bmc-table__cell"
91          colspan="{{$ctrl.header.length}}">No data</td>
92    </tr>
93  </tbody>
94</table>