Bind dynamic columns and data to mat table in angular 7

Question

Am binding data to angular material table by preparing columns dynamically.

please find below code 

component.ts

export class DepComponent {
    tableSource :any= [
              {
                "name":"ssit",
                "departments":[{"depName":"cse","noOfStudents":30},
                                {"depName":"civil","noOfStudents":60}]
              },
                   {
                "name":"vbit",
                "departments":[{"depName":"cse","noOfStudents":90},
                                {"depName":"civil","noOfStudents":40}]
              }
        ];

    displayedColumns: string[] = [];
   constructor() {
        this.displayedColumns= this.tableSource[0].departments.map(x=>x.depName)
    }
}


  <table mat-table [dataSource]="tableSource" class="mat-elevation-z8">
        <ng-container matColumnDef="{{column}}" *ngFor="let column of displayedColumns">
            <th mat-header-cell *matHeaderCellDef>
                {{column}}
            </th>
            <td mat-cell *matCellDef="let element">
                <span *ngFor="let s of element.departments">
                    {{s.noOfStudents}}
                </span>
            </td>
        </ng-container>

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

am getting output like this, duplicate data is printing in each row like below with my code

cse     civil
30 60   30 60
90 40   90 40

i want output like below

Cse Civil
30  60
90  40

Can you provide stackblitz where I can reproduce an issue!

Prashant Pimpale
– Prashant Pimpale

2019-10-03 09:59:34 +00:00
Commented Oct 3, 2019 at 9:59 — Prashant Pimpale
– Prashant Pimpale, Commented Oct 3, 2019 at 9:59
You have to manage both rows and column as separate array

Paresh Gami
– Paresh Gami

2019-10-03 10:12:21 +00:00
Commented Oct 3, 2019 at 10:12 — Paresh Gami
– Paresh Gami, Commented Oct 3, 2019 at 10:12

jitender · Accepted Answer · 2019-10-03 10:24:58Z

2

To get the desired result First you will need to transform data in desired format like

dataSource=this.tableSource.map(i=> {
      var result = {};
         i.departments.forEach(d=>{
        result[d['depName']]=d.noOfStudents
        })
       return result;
      })

then change html to

 <table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
         <ng-container matColumnDef="cse">
                <th mat-header-cell *matHeaderCellDef> Cse </th>
                <td mat-cell *matCellDef="let element"> {{element.cse}} </td>
          </ng-container>
          <ng-container matColumnDef="civil">
                <th mat-header-cell *matHeaderCellDef> Civil </th>
                <td mat-cell *matCellDef="let element"> {{element.civil}} </td>
          </ng-container>
        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
        <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
    </table>

demo

answered Oct 3, 2019 at 10:24

jitender

10.4k1 gold badge22 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

madhu Goud Over a year ago

it's working for sample JSON what I provided, when i fetch result from database result returning as {"30":"30","60":"60"} value is retunrning instead of key

jitender Over a year ago

@madhuGoud check your api response if that is same as sample json

madhu Goud Over a year ago

correct @jitender invalid response from my api, one thing is it possible to push object here result[d['depName']]={d.noOfStudents,d.noOfTeachers }

jitender Over a year ago

@madhuGoud I don't think so bcs it need to be string and your are trying to assign object

Collectives™ on Stack Overflow

Bind dynamic columns and data to mat table in angular 7

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related