How can i get column's name by dblclicking on a row in angular material table?

Question

i've a problem and i'm not finding nothing around the web.

I have an angular material table, and now I need that once a cell is dblclicked, it returns the column name, to then manage it with a switch and open various dialogs.

<tr mat-row *matRowDef="let row; columns: subdisplayedColumns" (dblclick)="openFilters(row)"></tr>

Edit

That's my complete table :

<td mat-cell *matCellDef="let element" [attr.colspan]="displayedColumns.length">
  <div class="example-element-detail"
       [@detailExpand]="element == expandedElement ? 'expanded' : 'collapsed'">
        <mat-table [dataSource]="element.dataMatricola | objectToArray" class="sub-table" >

          <ng-container matColumnDef="DT_primaInstallazione">
            <th mat-header-cell *matHeaderCellDef> Data prima installazione </th>
            <td mat-cell *matCellDef="let row"> {{row.DT_primaInstallazione | date: 'dd/MM/YYYY'}} </td>
          </ng-container>


          <ng-container matColumnDef="DT_fineGaranziaHW">
            <th mat-header-cell *matHeaderCellDef> Data fine garanzia HW </th>
            <td mat-cell *matCellDef="let row"> {{row.DT_fineGaranziaHW | date: 'dd/MM/YYYY'}} </td>
          </ng-container>


          <ng-container matColumnDef="anniGaranzia">
            <th mat-header-cell *matHeaderCellDef> Anni di garanzia </th>
            <td mat-cell *matCellDef="let row"> {{row.anniGaranzia}} </td>
          </ng-container>


          <ng-container matColumnDef="DT_instW10">
            <th mat-header-cell *matHeaderCellDef> Data installazione windows 10 </th>
            <td mat-cell *matCellDef="let row"> {{row.DT_instW10 | date: 'dd/MM/YYYY'}} </td>
          </ng-container>


          <ng-container matColumnDef="tipologiaXFS">
            <th mat-header-cell *matHeaderCellDef> Tipologia XFS </th>
            <td mat-cell *matCellDef="let row"> {{row.tipologiaXFS}} </td>
          </ng-container>

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

          <ng-container matColumnDef="DT_instShockBuster">
            <th mat-header-cell *matHeaderCellDef> Data Installazione Shockbuster </th>
            <td mat-cell *matCellDef="let row"> {{row.DT_instShockBuster | date: 'dd/MM/YYYY'}} </td>
          </ng-container>

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

          <tr mat-header-row *matHeaderRowDef="subdisplayedColumns"></tr>
          <tr mat-row *matRowDef="let row; columns: subdisplayedColumns" (dblclick)="openFilters(row)"></tr>
        </mat-table>
  </div>
</td>

This is what I've tried so far, but obviously this way I get back all the data of that row, I would need to know the exact column in which the double click takes place.

Answer 1

If you want to get the column name you need to add the click event on the cell, not the row. Then you can do the follow:

HTML

<table mat-table [dataSource]="data" class="mat-elevation-z8">
  <ng-container [matColumnDef]="column" *ngFor="let column of columns">
    <th mat-header-cell *matHeaderCellDef> {{column}} </th>
    <td mat-cell *matCellDef="let element" (click)=onClick(column)> {{element[column]}}</td>
  </ng-container>

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

Code

onClick(data: any) {
    console.log(data)
  }