
<!-- <table class="pyramid-table">

  <tbody>
    <tr *ngFor="let item of pyramidData; let i = index">
      <td class="label-column" [ngStyle]="{'background': item.color}">{{ item.label.charAt(0) }}</td>
      <td [ngStyle]="{ 'clip-path': getClipPath(i, pyramidData.length), 'background': item.color }">

      </td>
    </tr>
  </tbody>
</table> -->

<table class="pyramid-table">
    <thead>
      <tr>
        <th *ngFor="let column of pyramidColumns">
          {{ column.label }}
        </th>
      </tr>
    </thead>
    <tbody class="pyramid-body">
      <tr *ngFor="let item of pyramidData; let i = index">
        <td *ngFor="let column of pyramidColumns">
          <ng-container *ngIf="column.value === config.squareValue; else pyramidColumn">
            <span
              [ngStyle]="{ 'background': item[config.colorKey], 'color': 'white', 'padding': '5px', 'display': 'inline-block', 'text-align': 'center', 'width': '20px' }">
              {{ item[column.value] | slice:0:1 }}
            </span>
          </ng-container>
          <ng-template #pyramidColumn>
            <span *ngIf="column.value === 'pyramidSliceValue'; else normalColumn"
              [ngStyle]="{ 'clip-path': getClipPath(i, pyramidData.length), 'background':item[config.colorKey], 'display': 'block', 'height': '30px', 'width': '150px' }">
            </span>
          </ng-template>
          <ng-template #normalColumn>
            {{ column.format(item[column.value]) }}
          </ng-template>
        </td>
      </tr>
    </tbody>
    <tfoot *ngIf="!!config.footerItem === true">
      <tr>
        <td *ngFor="let column of pyramidColumns">
          <ng-container *ngIf="config.footerItem[column.value] !== undefined">
            {{ column.format(config.footerItem[column.value]) }}
          </ng-container>
        </td>
      </tr>
    </tfoot>
  </table>
  
  