Angular2 MatTable data with inner array

Question

This is my first post on Stack Overflow, so I hope I make myself clear.

I'm trying to create a table with dynamic columns, but I fail to understand how should I bind matColumnDef to a specific element position from an array. Since my original code is much more complex and hard to follow, I'll post a simpler version that contains the problem itself.

So here is the HTML code. I should create a column for every element from the inner-array (numere) in "date", (in this case, there are 2, but in my original app the array is dynamic, sometimes it has 2 elements, sometimes it has 4, etc.)

<mat-form-field>
  <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
</mat-form-field>

<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">

  <!-- Position Column -->
  <ng-container matColumnDef="position">
    <th mat-header-cell *matHeaderCellDef> No. </th>
    <td mat-cell *matCellDef="let element"> {{element.position}} </td>
  </ng-container>

  <!-- Name Column -->
  <ng-container matColumnDef="name">
    <th mat-header-cell *matHeaderCellDef> Name </th>
    <td mat-cell *matCellDef="let element"> {{element.name}} </td>
  </ng-container>

  <!-- Weight Column -->
  <ng-container matColumnDef="weight">
    <th mat-header-cell *matHeaderCellDef> Weight </th>
    <td mat-cell *matCellDef="let element"> {{element.weight}} </td>
  </ng-container>

  <!-- Symbol Column -->
  <ng-container matColumnDef="symbol">
    <th mat-header-cell *matHeaderCellDef> Symbol </th>
    <td mat-cell *matCellDef="let element"> {{element.symbol}} </td>
  </ng-container>

<div *ngFor="let number of date;let i=index;">
 <ng-container matColumnDef="{{i}}">
    <th mat-header-cell *matHeaderCellDef> Symbol </th>
    <td mat-cell *matCellDef="let element"> {{element.numere[i]}} </td>
  </ng-container>
</div>

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

And here is the typescript code:

import {Component} from '@angular/core';
import {MatTableDataSource} from '@angular/material';

export interface PeriodicElement {
  name: string;
  position: number;
  weight: number;
  symbol: string;
  numere: Array<string>;
}



/**
 * @title Table with filtering
 */
@Component({
  selector: 'table-filtering-example',
  styleUrls: ['table-filtering-example.css'],
  templateUrl: 'table-filtering-example.html',
})
export class TableFilteringExample {
  date: PeriodicElement[] = [
  {position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H', numere: ["alb","negru"]},
  {position: 2, name: 'Helium', weight: 4.0026, symbol: 'He',numere: ["alb","negru"]},
  {position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li',numere: ["galben","roz"]},
  {position: 4, name: 'Beryllium', weight: 9.0122, symbol: 'Be',numere: ["alb","negru"]},
  {position: 5, name: 'Boron', weight: 10.811, symbol: 'B',numere: ["galben","roz"]},
  {position: 6, name: 'Carbon', weight: 12.0107, symbol: 'C',numere: ["alb","negru"]},
  {position: 7, name: 'Nitrogen', weight: 14.0067, symbol: 'N',numere: ["maro","roz"]},
  {position: 8, name: 'Oxygen', weight: 15.9994, symbol: 'O',numere: ["pink","bombon roz"]},
  {position: 9, name: 'Fluorine', weight: 18.9984, symbol: 'F',numere: ["alb","negru"]},
  {position: 10, name: 'Neon', weight: 20.1797, symbol: 'Ne',numere: ["alb","negru"]},
];
  displayedColumns: string[] = ['position', 'name', 'weight', 'symbol','0','1'];
  dataSource = new MatTableDataSource(this.date);

  applyFilter(filterValue: string) {
    this.dataSource.filter = filterValue.trim().toLowerCase();
  }
}

Now.. I figured out a way to assign elements to columns, by giving them indexes as 0,1,2,..., array.length, and I can display them in the actual table, but...

The problem is that if I want to add a filter on the table or a mat-sort-header on those columns, it won't work. The sort, for example, needs to have the 'property-name' same as matColumnDef (i.e.: element.position <=> matColumnDef='position'). But in this case, I don't have a property-name for each element in array (something like 'numere[0]','numere[1]', etc.), only the array property-name itself which is too general to apply it to all the columns and doesn't work.

So if I want to sort the table with respect to the first element in table ('numere[0]') I won't be able, because there is no suck property-name as numere[x].

Any ideas how could I achieve this? Also, I would like to stick with Angular Material library and not change to other options because I was said to do so.

David Ćeranić David Ćeranić · Accepted Answer · 2019-02-21T13:45:59

Since there is no any solution mentioned. I'll try with mine. So i had to display actors, directors and genres that are initialy maxSelectedItems="3"

actors: (2) [{…}, {…}] , 
directors: [{…}] , 
genres: (2) [{…}, {…}] 

<ng-container matColumnDef="actors">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> Actors </th>
    <td mat-cell *matCellDef="let row"> {{ row.actors[0].name}} {{row.actors[1] !== undefined ? row.actors[1].name : ''}} {{ row.actors[2] !== undefined ? row.actors[2].name : ''}}</td>
</ng-container>

Angular2 MatTable data with inner array

2 Answers