1<div class="bmc-table__container">
2  <table-toolbar  ng-if="$ctrl.selectable"
3                  selection-count="$ctrl.selectedRows.size"
4                  active="$ctrl.selectedRows.size > 0"
5                  actions="$ctrl.batchActions"
6                  emit-action="$ctrl.onEmitBatchAction(action)"
7                  emit-close="$ctrl.onToolbarClose()"
8                  ng-animate-children="true">
9  </table-toolbar>
10  <table  class="bmc-table {{$ctrl.size}}"
11          ng-class="{
12            'bmc-table--sortable': $ctrl.sortable,
13            'bmc-table--expandable': $ctrl.expandable,
14            'bmc-table--selectable': $ctrl.selectable,
15            'bmc-table--row-actions-enabled': '$ctrl.rowActionsEnabled',
16          }">
17    <thead class="bmc-table__head">
18      <!-- Header row -->
19      <tr>
20        <!-- Expandable empty cell -->
21        <th ng-if="$ctrl.expandable"
22            class="bmc-table__column-header"></th>
23        <!-- Select checkbox -->
24        <th ng-if="$ctrl.selectable"
25            class="bmc-table__column-header">
26          <table-checkbox ng-model="$ctrl.selectHeaderCheckbox"
27                          indeterminate="$ctrl.someSelected"
28                          emit-change="$ctrl.onHeaderSelectChange(checked)">
29          </table-checkbox>
30        </th>
31        <!-- Header items -->
32        <th ng-repeat="headerItem in $ctrl.header track by $index"
33            class="bmc-table__column-header">
34          <span ng-if="!$ctrl.sortable || !headerItem.sortable">
35            {{headerItem.label}}
36          </span>
37          <span ng-if="$ctrl.sortable && headerItem.sortable"
38                ng-click="$ctrl.onClickSort($index)"
39                class="bmc-table__column-header--sortable">
40            {{headerItem.label}}
41            <!-- Sort icons -->
42            <button class="sort-icon"
43                    type="button"
44                    aria-label="sort {{headerItem.label}}">
45              <icon file="icon-arrow--up.svg"
46                    ng-if="$index === $ctrl.activeSort"
47                    ng-class="{
48                      'sort-icon--descending': !$ctrl.sortAscending,
49                      'sort-icon--ascending' : $ctrl.sortAscending }"
50                    class="sort-icon--active"
51                    aria-hidden="true"></icon>
52              <span ng-if="$index !== $ctrl.activeSort"
53                    class="sort-icon--inactive"
54                    aria-hidden="true">
55                  <icon file="icon-arrow--up.svg"></icon>
56                  <icon file="icon-arrow--down.svg"></icon>
57              </span>
58            </button>
59          </span>
60        </th>
61        <!-- Row actions empty cell -->
62        <th ng-if="$ctrl.rowActionsEnabled"
63            class="bmc-table__column-header"></th>
64      </tr>
65    </thead>
66    <tbody class="bmc-table__body">
67      <!-- Data rows -->
68      <tr ng-if="$ctrl.data.length > 0"
69          ng-repeat-start="row in $ctrl.data track by $index"
70          class="bmc-table__row"
71          ng-class="{
72            'bmc-table__row--expanded': $ctrl.expandedRows.has($index),
73            'bmc-table__row--selected': $ctrl.selectedRows.has($index),
74          }">
75        <!-- Row expansion trigger -->
76        <td ng-if="$ctrl.expandable"
77            class="bmc-table__cell">
78          <button type="button"
79                  class="btn  btn--expand"
80                  aria-label="expand row"
81                  ng-click="$ctrl.onClickExpand($index)">
82            <icon file="icon-chevron-right.svg" aria-hidden="true"></icon>
83          </button>
84        </td>
85        <!-- Row checkbox -->
86        <td ng-if="$ctrl.selectable"
87            class="bmc-table__cell">
88          <table-checkbox ng-if="row.selectable"
89                          ng-model="row.selected"
90                          emit-change="$ctrl.onRowSelectChange($index)">
91          </table-checkbox>
92        </td>
93        <!-- Row item -->
94        <td ng-repeat="item in row.uiData track by $index"
95            class="bmc-table__cell">
96            <ng-bind-html ng-bind-html="item"></ng-bind-html>
97        </td>
98        <!-- Row Actions -->
99        <td ng-if="$ctrl.rowActionsEnabled"
100            class="bmc-table__cell  bmc-table__row-actions">
101          <table-actions
102            ng-if="row.actions"
103            actions="row.actions"
104            emit-action="$ctrl.onEmitRowAction(action, row)">
105          </table-actions>
106        </td>
107      </tr>
108      <!-- Expansion row -->
109      <tr ng-repeat-end
110          ng-if="$ctrl.expandedRows.has($index)"
111          class="bmc-table__expansion-row">
112        <td class="bmc-table__cell"></td>
113        <td class="bmc-table__cell"
114            colspan="{{$ctrl.header.length + $ctrl.sortable +
115                      $ctrl.expandable + $ctrl.rowActionsEnabled}}">
116          <ng-bind-html
117            ng-bind-html="row.expandContent || 'No data'">
118          </ng-bind-html>
119        </td>
120      </tr>
121      <!-- Empty table -->
122      <tr ng-if="$ctrl.data.length === 0"
123          class="bmc-table__expansion-row">
124        <td class="bmc-table__cell"
125            colspan="{{$ctrl.header.length + $ctrl.sortable +
126                      $ctrl.expandable + $ctrl.rowActionsEnabled}}">
127          No data
128        </td>
129      </tr>
130    </tbody>
131  </table>
132</div>