<table class="bmc-table {{$ctrl.size}}"> <thead class="bmc-table__head"> <!-- Header row (non-sortable) --> <tr ng-if="!$ctrl.sortable"> <th ng-repeat="headerItem in $ctrl.header" class="bmc-table__column-header"> {{headerItem.label}} </th> </tr> <!-- Header row (sortable) --> <tr ng-if="$ctrl.sortable"> <th ng-repeat="headerItem in $ctrl.header track by $index" class="bmc-table__column-header"> <span ng-if="!headerItem.sortable"> {{headerItem.label}} </span> <span ng-if="headerItem.sortable" ng-click="$ctrl.onClickSort($index)" class="bmc-table__column-header--sortable"> {{headerItem.label}} <!-- Sort icons --> <button class="sort-icon" type="button" aria-label="sort {{headerItem.label}}"> <icon file="icon-arrow--up.svg" ng-if="$index === $ctrl.activeSort" ng-class="{ 'sort-icon--descending': !$ctrl.sortAscending, 'sort-icon--ascending' : $ctrl.sortAscending }" class="sort-icon--active" aria-hidden="true"></icon> <span ng-if="$index !== $ctrl.activeSort" class="sort-icon--inactive" aria-hidden="true"> <icon file="icon-arrow--up.svg"></icon> <icon file="icon-arrow--down.svg"></icon> </span> </button> </span> </th> </tr> </thead> <tbody class="bmc-table__body"> <!-- Data rows --> <tr ng-if="$ctrl.data.length > 0" ng-repeat="row in $ctrl.data" class="bmc-table__row"> <!-- Row item --> <td ng-repeat="item in row.uiData track by $index" class="bmc-table__cell"> <ng-bind-html ng-bind-html="item"></ng-bind-html> </td> <!-- Row Actions --> <td ng-if="$ctrl.rowActionsEnabled" class="bmc-table__cell bmc-table__row-actions"> <table-actions actions="row.actions" emit-action="$ctrl.onEmitTableAction(action, row)"> </table-actions> </td> </tr> <!-- Empty table --> <tr ng-if="$ctrl.data.length === 0"> <td>No data</td> </tr> </tbody> </table>