<!-- <div *ngIf = "dashboardDataAvail && dashBoardCall" style="width: 100%;">
  <div class="sell-ang-dbtitle">Sales Performance</div>
  <div class="sell-ang-dbSubTitleLbl">For Period : {{periodCode}}</div>
</div> -->
<table #performanceTable *ngIf = "dashboardDataAvail" mat-table [dataSource]="dataSource">
         
  <!-- Header row second group -->
  <ng-container *ngFor='let colDef of columnProperties; let col = index'   matColumnDef="{{colDef.name}}" > <!-- [sticky]="colDef.sticky" [stickyEnd]="colDef.sticky" -->
    <th class = "sell-table-td sell-table-header" id = "{{colDef.name}}_col{{col}}"  *matHeaderCellDef  [style.width]="colDef.width" [style.top] = "getRowTop()"
    [ngClass] = "{'sell-hidden-class': (colDef.name == 'GROUP_DESCR'|| colDef.name == 'FULL_GROUP_DESCR')}" >{{colDef.display}}</th> 
    <ng-container *matCellDef="let element; let row = index"  sticky>

     <!-- only for simple rows -Start-->
      <td *ngIf = "element[grpCode].indexOf('_TOTAL') == -1 && (colDef.name).indexOf('_ACHIEVEMENT') == -1" 
       class = "sell-table-td" id = "Column_{{row}}_{{col}}" [ngClass]="{'stickyClass' : (colDef.name == 'GROUP_DESCR'|| colDef.name == 'FULL_GROUP_DESCR'), 'sell-td-backGround' : element.FOCUS}" mat-cell> 
        <!--<span *ngIf = "colDef.format == 'Y'" class = "bb-rupee-span">&#8377;</span>-->
        <!-- <span  [ngClass]="{ 'sell-number' :  colDef.inputType == 'number','sell-text': colDef.inputType == 'text'}">{{element[colDef.name]}}</span>  -->
        <span *ngIf = "col == 0" class="sell-column-bold"
          [ngClass]="{ 'sell-number' :  colDef.inputType == 'number','sell-text': colDef.inputType == 'text' }">
          {{element[colDef.name]}}
        </span>

        <span *ngIf = "col == 2 || col == 5 " 
          [ngClass]="{ 'sell-number' :  colDef.inputType == 'number'}">
          {{element[colDef.name] | INR: 2}}
        </span>

        <span *ngIf = "col == 1 || col == 4 " 
          [ngClass]="{ 'sell-number' :  colDef.inputType == 'number'}">
          {{element[colDef.name] | INR: 0}}
        </span>

        <span *ngIf = "col == 3  || col == 6 " 
          [ngClass]="{ 'sell-number' :  colDef.inputType == 'number', 'sell-col-green' : element[colDef.name] > 99, 'sell-col-red' : element[colDef.name] < 100}">
          {{element[colDef.name] | INR: 0}}%
        </span>
      </td>

      <td *ngIf = "element[grpCode].indexOf('_TOTAL') == -1 && (colDef.name).indexOf('_ACHIEVEMENT') != -1" 
      [ngClass] = "{'sell-td-backGround' : element.FOCUS}" class = "sell-table-td" id = "Column_{{row}}_{{col}}"  mat-cell> 
          <!--<span *ngIf = "colDef.format == 'Y'" class = "bb-rupee-span">&#8377;</span> -->
         
          <span [ngClass]="{ 'sell-number' :  colDef.inputType == 'number','sell-text': colDef.inputType == 'text','sell-col-green' : element[colDef.name] > 99, 'sell-col-red' : element[colDef.name] < 100 }">{{element[colDef.name] | INR: 0}}%</span> 
          
          <!-- <span *ngIf = "element[colDef.name] > 99" class = "sell-col-green" [ngClass]="{ 'sell-number' :  colDef.inputType == 'number','sell-text': colDef.inputType == 'text' }">{{element[colDef.name] | number  : '.0-0'}}%</span>  -->
      </td>
     <!-- only for simple rows -End-->

      <!-- only for main group wise total -Start-->
      <td *ngIf = "element[grpCode].indexOf('_TOTAL') != -1" class = "sell-table-td"  [ngClass]="{'stickyClass' : (colDef.name == 'GROUP_DESCR'|| colDef.name == 'FULL_GROUP_DESCR')}" id = "Column_{{row}}_{{col}}"  mat-cell> 
       <!-- <span *ngIf = "colDef.format == 'Y'" class = "bb-rupee-span">&#8377;</span> -->
        <span *ngIf = "col == 0" class="sell-column-bold"
          [ngClass]="{ 'sell-number' :  colDef.inputType == 'number','sell-text': colDef.inputType == 'text' }">
          {{element[colDef.name]}}
        </span>

        <span *ngIf = "col == 2 || col == 5 " 
          [ngClass]="{ 'sell-number' :  colDef.inputType == 'number'}">
          {{element[colDef.name] | INR: 2}}
        </span>

        <span *ngIf = "col == 1 || col == 4 " 
          [ngClass]="{ 'sell-number' :  colDef.inputType == 'number'}">
          {{element[colDef.name] | INR: 0}}
        </span>

        <span *ngIf = "col == 3  || col == 6 " 
          [ngClass]="{ 'sell-number' :  colDef.inputType == 'number', 'sell-col-green' : element[colDef.name] > 99, 'sell-col-red' : element[colDef.name] < 100}">
          {{element[colDef.name] | INR: 0}}%
        </span>
      </td>
      <!-- only for main group wise total -Start-->
    </ng-container>

    <ng-container *ngIf = "true ">
      <td  [ngClass]="{'stickyClass' : (colDef.name == 'GROUP_DESCR'|| colDef.name == 'FULL_GROUP_DESCR')}" mat-footer-cell *matFooterCellDef>
       <!-- <span *ngIf = "colDef.format == 'Y'" class = "bb-rupee-span">&#8377;</span>-->
        <span *ngIf = "col == 0">{{grandTotalMap[col]}}</span> 
        <span *ngIf = "col == 2 || col == 5 " >{{grandTotalMap[col] | INR: 2 }}</span>
        <span *ngIf = "col == 1 || col == 4" >{{grandTotalMap[col] | INR: 0 }}</span>
        <span *ngIf = "col == 3  || col == 6">{{grandTotalMap[col] | INR: 0}}%</span>
      </td>
    </ng-container>
  </ng-container>
  
  <ng-container matColumnDef="No">
    <th class = "sell-table-td sell-table-header stickyClassHdr"  mat-header-cell *matHeaderCellDef [attr.rowspan]="2">Item Group</th>
  </ng-container>
  <ng-container matColumnDef="header-row-second-group">
    <th class = "sell-table-header"  mat-header-cell *matHeaderCellDef [attr.colspan]="3"> {{selMonth}} </th>
  </ng-container>
  <ng-container matColumnDef="header-row-third-group">
    <th class = "sell-table-header"  id = "sell_performance_YTD" mat-header-cell *matHeaderCellDef [attr.colspan]="3" > 
    <span>
      YTD <br> (This includes current month's planned)
    </span>
    </th>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="['No', 'header-row-second-group','header-row-third-group'] sticky: true;" [style.height]="'40px'"></tr>
  <tr mat-header-row *matHeaderRowDef="displayedColumns sticky: true;" [style.height]="'40px'"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;" [style.height]="'30px'" [ngClass] = "{ 'sell-hidden-class' : row[display] == 'N'}" id = "row_{{row}}" ></tr>
  
  <ng-container *ngIf = "true">
    <tr mat-footer-row  *matFooterRowDef="displayedColumns sticky: true;" [style.height]="'40px'"></tr>
  </ng-container>
</table>
