blob: 96ca8708bf4586ac1ae4abedcc3912059b22197d [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"
Yoshie Muranaka1d83af02019-09-06 08:52:35 -070046 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>
Yoshie Muranakafa562732019-07-17 11:23:15 -050061 <!-- Row item -->
Yoshie Muranaka8c80dbd2019-08-08 10:58:04 -050062 <td ng-repeat="item in row.uiData track by $index"
Yoshie Muranakafa562732019-07-17 11:23:15 -050063 class="bmc-table__cell">
Yoshie Muranaka8c80dbd2019-08-08 10:58:04 -050064 <ng-bind-html ng-bind-html="item"></ng-bind-html>
Yoshie Muranakafa562732019-07-17 11:23:15 -050065 </td>
66 <!-- Row Actions -->
Yoshie Muranakabb688792019-08-12 09:31:52 -050067 <td ng-if="$ctrl.rowActionsEnabled"
Yoshie Muranakafa562732019-07-17 11:23:15 -050068 class="bmc-table__cell bmc-table__row-actions">
Yoshie Muranakabb688792019-08-12 09:31:52 -050069 <table-actions
70 actions="row.actions"
71 emit-action="$ctrl.onEmitTableAction(action, row)">
72 </table-actions>
Yoshie Muranakafa562732019-07-17 11:23:15 -050073 </td>
74 </tr>
Yoshie Muranaka1d83af02019-09-06 08:52:35 -070075 <!-- 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>
Yoshie Muranakafa562732019-07-17 11:23:15 -050087 <!-- Empty table -->
Yoshie Muranaka1d83af02019-09-06 08:52:35 -070088 <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>
Yoshie Muranakafa562732019-07-17 11:23:15 -050092 </tr>
93 </tbody>
94</table>