Search code examples
angularhtml-tableangular-material-18

Performance issue while using with Angular material row spans

I am using angular material table. When we switch between view mode to editable mode it takes time while switching to any mode and its getting delayed. (Performance issue).

This is only taking time while I am using the Rowspan feature in the angular material table with inline editable mode otherwise it is ok.

<pre>
  <form [formGroup]="formGroup"> 
    <table mat-table [dataSource]="dataSource" class="mat-elevation-z8">   
       <ng-container matColumnDef="asset" sticky>  
            <th mat-header-cell *matHeaderCellDef> Asset </th>  
               <td mat-cell *matCellDef="let data; let i = index"     [attr.rowspan]="getRowSpan('assetType', i)"     [style.display]="getRowSpan('assetType', i) ? '' : 'none'"     [formGroup]="data" class="asset-column"> {{data.get('assetType').value}}</td>  
               </ng-container>   
                <ng-container matColumnDef="type" sticky>    
                   <th mat-header-cell *matHeaderCellDef class="custom-type"> Type </th>    
                    <td mat-cell *matCellDef="let data; let i = index"      [formGroup]="data" class="custom-type-cell {{data.get('type').value === 'Status' ? 'Status' : ''}}">{{data.get('type').value === 'Status' ? 'Cause' : data.get('type').value}}</td> 
                    </ng-container>    
                    <ng-container *ngFor="let col of columnNumbers">     
                      <ng-container matColumnDef="{{col}}">       
                        <th mat-header-cell *matHeaderCellDef class="number-column"> {{col}} </th>       
                        <td mat-cell *matCellDef="let data; let i=index" [formGroup]="data" (contextmenu)="onContextMenu($event, data, data.get(col).value, true)" class="number-cell {{data.get('type').value === 'Status' ? 'Status' : ''}}">   
                                <span *ngIf="!isTableEdit"> 
                                  {{data.get(col).value}}
                                </span>          
                                <!-- Input field to enter the value -->         <mat-form-field *ngIf="isTableEdit && isStatusEditable(data)">          
                                   <input matInput formControlName="{{col}}" (input)="updateStatusDropdowns()" appZeroOneDecimalRange>        
                                   </mat-form-field>      
                                   </td>     
                                  </ng-container>  
                                 </ng-container>   
                                 <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr> 
                                   <tr mat-row *matRowDef="let row; columns: displayedColumns; sticky: true"></tr> 
                                  </table> 
                                </form>
</pre>

How can we improve the performance of this?

or

Any other solution?

Solution

  • NOT use

    [attr.rowspan]="getRowSpan('assetType', i)" 
[style.display]="getRowSpan('assetType', i) ? '' : 'none'"

    Instead of it add a new property to your data

    dataSource=new MatTableDataSource(this.data.map((x:any,i:number=>(
         {...x,rowSpan:this.getRowSpan('assetType', i)}))

    And use

    [attr.rowspan]="data.rowSpan" 
[style.display]="data.rowSpan? '' : 'none'"

    NOTE: If your function depend from any variable in your .ts, just change the variable of the rowSpan when was necessary

    this.dataSource.data.forEach((x:any,i:number)=>{
     x.rowSpan=this.getRowSpan('assetType', i) 
})