Add Delete and Update Button for each row in HTML

I have an HTML page like this showing some values:

The HTML file is:

<h1 mat-dialog-title color="primary">
    MXK License Details
</h1>
<mat-dialog-content>
    <div class="generate-full-width example-container mat-elevation-z8">
        <!---->
        <table mat-table [dataSource]="mxkLicenses">
    
            <ng-container matColumnDef="Hardware Key">
                    <th mat-header-cell *matHeaderCellDef class="customtd" style="font-weight: bold;" style="font-size:15px;"><strong> Hardware Key </strong></th>
                    <td mat-cell *matCellDef="let element" class="customtd"> <textarea rows="2" cols="20" wrap="hard">{{element.hardwareKey}}</textarea> </td>
            </ng-container>

            <ng-container matColumnDef="MXK IP Address">
                <th mat-header-cell *matHeaderCellDef class="customtd" style="font-weight: bold;" style="font-size:15px;"><strong> MXK IP Address </strong></th>
                <td mat-cell *matCellDef="let element" class="customtd"> {{element.mxkIpAddress}} </td>
            </ng-container>
    
            <ng-container matColumnDef="MXK License Key">
                    <th mat-header-cell *matHeaderCellDef style="font-weight: bold;" style="font-size:15px;"><strong> MXK License Key </strong></th>
                    <td mat-cell *matCellDef="let element"> <textarea rows="2" cols="20" wrap="hard">{{element.mxkLicenseKey}}</textarea> </td>
            </ng-container>
            <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky:true"></tr>
            <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
    </table>
    </div>
    </mat-dialog-content>
    <mat-dialog-actions align="end">
        <button mat-button mat-raised-button mat-dialog-close cdkFocusInitial color="warn">Close</button>
    </mat-dialog-actions>

I want to add Delete and Update button in front of each row, like this:

The layout has to be the same as the first picture. I tried adding buttons but they come near the close button itself. Following is the code from component.ts for this:

@Component({
  selector: 'mxk-licenses-list-dialog',
  templateUrl: 'mxk-licenses-list-dialog.html',
})

export class mxkLicensesListDialog implements OnInit {
  mxkLicenses : any;
  displayedColumns: string[] = ['Hardware Key', 'MXK IP Address', 'MXK License Key'];
  constructor(
    public dialogRef: MatDialogRef<AddProductDialog>,
    private generateLicenseService: GeneratelicenseService,
    @Inject(MAT_DIALOG_DATA) public data) {
  }

  ngOnInit() {
    console.log("before the call : "+this.mxkLicenses);
    if(this.mxkLicenses === undefined) {
      this.generateLicenseService.getMxkLicenses()
      .subscribe((data) => {
        this.mxkLicenses = data;
        console.log("after the call : "+this.mxkLicenses);
      });
    }

  }
}

I am stuck on this for days. I want to add the total entries and page number and search button too but the layout has to be the old one. Please help.

Edit:

Added image to show the spacing problem.