Apply Mat-Tootip to Mat-table cell generated using *matRowDef

Haq

New Member
#1
Currently I am using some data to create and populate a table dynamically. The number of columns remains consistent but the number of rows changes depending on the data. There is one column in the table that shows a number. I want to add a tool tip that shows on hover, which is extra data related to the data in that row so in the data it's in the same object however, I do not know how to access the individual cells as all of the rows are dynamically generated.

HTML:
Mã:
<mat-form-field>
  <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
</mat-form-field>
<mat-table #table [dataSource]="dataSource" matSort style="font-size: 4px">
<ng-container matColumnDef="{{column.id}}" *ngFor="let column of columnNames">
<mat-header-cell *matHeaderCellDef  mat-sort-header> {{column.value}} </mat-header-cell>
<mat-cell *matCellDef="let element"> {{element[column.id]}} </mat-cell>
</ng-container>
  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
  <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>

</mat-table>
Columns:
Mã:
  columnNames = [{
    id: "id",
    value: "ID"

  }, {
    id: "ss",
    value: "SS"
  },
    {
      id: "cd",
      value: "CD"
    },
    {
      id: "type",
      value: "Type"
    }, {
      id: "type2",
      value: "Secondary Type"
    },
    {
      id: "motion",
      value: "Motion"
    },{
      id: "quantity",
      value: "Quantity"
    },{
      id: "in",
      value: "In"
    },{
      id: "error",
      value: "Error Code"
    }];
Example Data:
Mã:
  {
    "id": 1,
    "ss": null,
    "cd": null,
    "type": null,
    "type2": null,
    "motion": null,
    "quantity": null,
    "in": null,
    "error_cd": "603",
    "error_nm": "Description for Error 603"
  },
    {
    "id": 2,
    "ss": null,
    "cd": null,
    "type": null,
    "type2": null,
    "motion": null,
    "quantity": null,
    "in": null,
    "error_cd": "605",
    "error_nm": "Description for Error 605"
  }
so when I hover over each cell for the column of error code I want to show a tool tip with the description for the code which is provided in error_nm.

How can I apply a tool-tip to each cell in the error column which will pull the error code description from the same object as that error in dataSource?
 

Từ khóa phổ biến

You are using an out of date browser. It may not display this or other websites correctly.
You should upgrade or use an alternative browser.

Top