blob: 6b2420d8373205f032f738e8222160bb6fdae072 [file] [log] [blame]
Yoshie Muranaka8c80dbd2019-08-08 10:58:04 -05001<table class="bmc-table {{$ctrl.size}}">
Yoshie Muranakab1f64242019-09-04 11:40:51 -07002 <thead class="bmc-table__head">
3 <!-- Header row (non-sortable) -->
4 <tr ng-if="!$ctrl.sortable">
5 <th ng-repeat="headerItem in $ctrl.header"
Yoshie Muranakafa562732019-07-17 11:23:15 -05006 class="bmc-table__column-header">
Yoshie Muranakab1f64242019-09-04 11:40:51 -07007 {{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>
Yoshie Muranakafa562732019-07-17 11:23:15 -050040 </th>
41 </tr>
42 </thead>
Yoshie Muranakab1f64242019-09-04 11:40:51 -070043 <tbody class="bmc-table__body">
Yoshie Muranakafa562732019-07-17 11:23:15 -050044 <!-- Data rows -->
Yoshie Muranakab1f64242019-09-04 11:40:51 -070045 <tr ng-if="$ctrl.data.length > 0"
46 ng-repeat="row in $ctrl.data"
Yoshie Muranakafa562732019-07-17 11:23:15 -050047 class="bmc-table__row">
48 <!-- Row item -->
Yoshie Muranaka8c80dbd2019-08-08 10:58:04 -050049 <td ng-repeat="item in row.uiData track by $index"
Yoshie Muranakafa562732019-07-17 11:23:15 -050050 class="bmc-table__cell">
Yoshie Muranaka8c80dbd2019-08-08 10:58:04 -050051 <ng-bind-html ng-bind-html="item"></ng-bind-html>
Yoshie Muranakafa562732019-07-17 11:23:15 -050052 </td>
53 <!-- Row Actions -->
Yoshie Muranakabb688792019-08-12 09:31:52 -050054 <td ng-if="$ctrl.rowActionsEnabled"
Yoshie Muranakafa562732019-07-17 11:23:15 -050055 class="bmc-table__cell bmc-table__row-actions">
Yoshie Muranakabb688792019-08-12 09:31:52 -050056 <table-actions
57 actions="row.actions"
58 emit-action="$ctrl.onEmitTableAction(action, row)">
59 </table-actions>
Yoshie Muranakafa562732019-07-17 11:23:15 -050060 </td>
61 </tr>
62 <!-- Empty table -->
Yoshie Muranakab1f64242019-09-04 11:40:51 -070063 <tr ng-if="$ctrl.data.length === 0">
Yoshie Muranakafa562732019-07-17 11:23:15 -050064 <td>No data</td>
65 </tr>
66 </tbody>
67</table>