mempool/frontend/src/app/lightning/channels-list/channels-list.component.html

<div>
  <table class="table table-borderless">
    <thead>
      <th class="alias text-left" i18n="nodes.alias">Node Alias</th>
      <th class="alias text-left d-none d-md-table-cell" i18n="channels.transaction">&nbsp;</th>
      <th class="alias text-left d-none d-md-table-cell" i18n="nodes.alias">Status</th>
      <th class="channels text-left d-none d-md-table-cell" i18n="channels.rate">Fee Rate</th>
      <th class="capacity text-right d-none d-md-table-cell" i18n="nodes.capacity">Capacity</th>
      <th class="capacity text-left" i18n="channels.id">Channel ID</th>
    </thead>
    <tbody *ngIf="channels$ | async as channels; else skeleton">
      <tr *ngFor="let channel of channels; let i = index;">
        <ng-container *ngTemplateOutlet="tableTemplate; context: { $implicit: channel, node: channel.node_left.public_key === publicKey ? channel.node_right : channel.node_left }"></ng-container>
      </tr>
    </tbody>
    <ng-template #skeleton>
      <tbody>
        <tr *ngFor="let item of [1,2,3,4,5,6,7,8,9,10]">
          <td class="alias text-left" style="width: 370px;">
            <span class="skeleton-loader"></span>
          </td>
          <td class="alias text-left">
            <span class="skeleton-loader"></span>
          </td>
          <td class="capacity text-left d-none d-md-table-cell">
            <span class="skeleton-loader"></span>
          </td>
          <td class="channels text-left d-none d-md-table-cell">
            <span class="skeleton-loader"></span>
          </td>
          <td class="channels text-right d-none d-md-table-cell">
            <span class="skeleton-loader"></span>
          </td>
          <td class="channels text-left">
            <span class="skeleton-loader"></span>
          </td>
        </tr>
      </tbody>
    </ng-template>
  </table>
</div>

<ng-template #tableTemplate let-channel let-node="node">
  <td class="alias text-left">
    <div>{{ node.alias || '?' }}</div>
    <div class="second-line">
      <a [routerLink]="['/lightning/node' | relativeUrl, node.public_key]">
        <span>{{ node.public_key | shortenString : 10 }}</span>
      </a>
      <app-clipboard [text]="node.public_key" size="small"></app-clipboard>
    </div>
  </td>
  <td class="alias text-left">
    <div class="second-line">{{ node.channels }} channels</div>
    <div class="second-line"><app-amount [satoshis]="node.capacity" digitsInfo="1.2-2"></app-amount></div>
  </td>
  <td class="d-none d-md-table-cell">
    <span class="badge rounded-pill badge-secondary" *ngIf="channel.status === 0">Inactive</span>
    <span class="badge rounded-pill badge-success" *ngIf="channel.status === 1">Active</span>
    <span class="badge rounded-pill badge-danger" *ngIf="channel.status === 2">Closed</span>
  </td>
  <td class="capacity text-left d-none d-md-table-cell">
    {{ node.fee_rate }} <span class="symbol">ppm ({{ node.fee_rate / 10000 | number }}%)</span>
  </td>
  <td class="capacity text-right d-none d-md-table-cell">
    <app-amount [satoshis]="channel.capacity" digitsInfo="1.2-2"></app-amount>
  </td>
  <td class="capacity text-left">
    <a [routerLink]="['/lightning/channel' | relativeUrl, channel.id]">{{ channel.short_id }}</a>
   </td>
</ng-template>