-1

In my current scenario where I want row as header and column will be dynamic value which i have to prouce in material table below is the example

                  Department       Deparment1
Name              Jack             Vimal
Location          Chennai          Lucknow

But the same I was able to produce normal html with angular but the problem is I was not able to destroy the current table when i perform any action in the page.

Normal HTML table

     <table>
        <th *ngFor="let column of columnsToDisplay; let i=index" (click)="assumptionModel(i)">{{column}}</th>
        <tr>
          <td *ngFor="let dat of trialMilestones">{{dat.name}}</td>
        </tr>
        <tr>
          <td *ngFor="let dat of trialMilestones">{{dat.location}}</td>
        </tr>
    </table>

Please let me know how to do is there any possible way to do this seriously struggling

Mr.M
  • 1,472
  • 3
  • 29
  • 76

1 Answers1

0

In a typical material table, you has

  1. dataSource, the data
  2. displayedColumns, an array of string with the name of the columns
  3. columnsDef, an array of object like {title:'header',name:'field'}

See that displayedColumns are relationated with columnsDef

displayedColumns=columsDef.map(x=>x.name)

So:

<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
    <ng-container *ngFor="let column of columnsDef" [matColumnDef]="column.name">
        <th mat-header-cell *matHeaderCellDef>{{column.title}}</th>
        <td mat-cell *matCellDef="let element">
            {{element[column.name]}}
        </td>
    </ng-container>

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

Now you change displayedColumns and columnsDef. Well in this stackblitz I use an auxiliar variable "columnDefAll with all the possible columns and a multiselect with [ngModel]=displayedColumns and use (ngModelChange) to filter the columns (displayedColumns will be the dolumnsDefAll filtered). but you can do in any different way

<mat-form-field>
    <mat-label>Columns</mat-label>
    <mat-select multiple [ngModel]="displayedColumns"
              (ngModelChange)="displayedColumns=$event;changeColumns($event)" >
        <mat-option *ngFor="let col of columnsDefAll" [value]="col.name">
            {{col.title}}
        </mat-option>
    </mat-select>
</mat-form-field>

  changeColumns(columns)
  {
    this.columnsDef=this.columnsDefAll.filter(x=>columns.indexOf(x.name)>=0)
  }
Eliseo
  • 50,109
  • 4
  • 29
  • 67
  • thanks for the reply but I think you mis understood the problem i don't want any filter what i want instead of column header i want row header – Mr.M Feb 21 '20 at 07:56
  • ::glups:: sorry, see https://stackoverflow.com/questions/57650401/how-can-i-create-an-angular-material-design-table-with-infinite-columns-for-kno – Eliseo Feb 21 '20 at 08:06
  • again here column is there but how to get static row in the left hand side like my example – Mr.M Feb 21 '20 at 08:50