xref: /openbmc/phosphor-webui/app/common/components/table/table.html (revision 1d83af072eb4c047ef08fae79775a34599ed5ed3)

<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-start="row in $ctrl.data track by $index"
        class="bmc-table__row"
        ng-class="{
          'bmc-table__row--expanded': $ctrl.expandedRows.has($index)
        }">
      <!-- Row expansion trigger -->
      <td ng-if="$ctrl.expandable"
          class="bmc-table__cell">
        <button type="button"
                class="btn  btn--expand"
                aria-label="expand row"
                ng-click="$ctrl.onClickExpand($index)">
          <icon file="icon-chevron-right.svg" aria-hidden="true"></icon>
        </button>
      </td>
      <!-- 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>
    <!-- Expansion row -->
    <tr ng-repeat-end
        ng-if="$ctrl.expandedRows.has($index)"
        class="bmc-table__expansion-row">
      <td class="bmc-table__cell"></td>
      <td class="bmc-table__cell"
          colspan="{{$ctrl.header.length - 1}}">
        <ng-bind-html
          ng-bind-html="row.expandContent || 'No data'">
        </ng-bind-html>
      </td>
    </tr>
    <!-- Empty table -->
    <tr ng-if="$ctrl.data.length === 0"
        class="bmc-table__expansion-row">
      <td class="bmc-table__cell"
          colspan="{{$ctrl.header.length}}">No data</td>
    </tr>
  </tbody>
</table>