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

<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>