I am trying to convert a grid from web forms grid to angular material table.

I have a condition something like this in web forms grid:

protected void grdRequests_PreRender(object sender, EventArgs e)
        {
            for (int rowIndex = this.grdRequests.Items.Count - 2; rowIndex >= 0; rowIndex--)
            {
                GridDataItem row = this.grdRequests.Items[rowIndex];
                GridDataItem previousRow = this.grdRequests.Items[rowIndex + 1];

                for (int i = 0; i < row.Cells.Count; i++)
                {
                    if (row.Cells[i].Text == previousRow.Cells[i].Text && row.Cells[2].Text == previousRow.Cells[2].Text)
                    {
                        // Check by date too
                        if (row.Cells[14].Text == previousRow.Cells[14].Text)
                        {
                            row.Cells[i].RowSpan = previousRow.Cells[i].RowSpan < 2 ? 2 : previousRow.Cells[i].RowSpan + 1;
                            previousRow.Cells[i].Visible = false;
                        }
                    }

                    if (previousRow.Cells[i].Text.Contains("<b>"))
                    {
                        previousRow.Cells[i + 1].Font.Bold = true;
                    }
                    else if (row.Cells[i].Text.Contains("<b>"))
                    {
                        row.Cells[i + 1].Font.Bold = true;
                    }
                }
            }
        }

How can I convert this to work with angular material?
For example : if the IPSCaseCode text is matching with the next row then I need to club the rows except Amount column.
This is the table which I have currently:

<table mat-table [dataSource]="dataSource" class="mat-elevation-z8" matSort>

      <!--- Note that these columns can be defined in any order.
The actual rendered columns are set as a property on the row definition" -->
      <!-- Position Column -->
      <ng-container matColumnDef="IPSCaseCode">
        <th mat-header-cell *matHeaderCellDef> IPSCaseCode </th>
        <td mat-cell *matCellDef="let element"> {{element.IPSCaseCode}} </td>
      </ng-container>



      <ng-container matColumnDef="Amount">
        <th mat-header-cell *matHeaderCellDef> Amount </th>
        <td mat-cell *matCellDef="let element"> {{element.Amount}} </td>
      </ng-container>

      <ng-container matColumnDef="Description">
        <th mat-header-cell *matHeaderCellDef> Description </th>
        <td mat-cell *matCellDef="let element"> {{element.Description}} </td>
      </ng-container>

      <ng-container matColumnDef="SupportingDocs">
        <th mat-header-cell *matHeaderCellDef> Supporting Docs </th>
        <td mat-cell *matCellDef="let element">
          @if(element.HasFile){
          <button mat-raised-button color="primary" (click)="DownloadDoc($event,element)">View</button>
          }
        </td>
      </ng-container>

      <ng-container matColumnDef="RequestDate">
        <th mat-header-cell *matHeaderCellDef> RequestDate </th>
        <td mat-cell *matCellDef="let element"> {{element.RequestDate}} </td>
      </ng-container>

      <ng-container matColumnDef="Status">
        <th mat-header-cell *matHeaderCellDef> Status </th>
        <td mat-cell *matCellDef="let element"> {{element.Status}} </td>
      </ng-container>


      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
      <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>



    </table>

I tried to find similar information on web but did find any solution based on similar conditions.
I tried [attr.rowspan]=”3″ but this is not based on condition.