Use column data to fill rows in a data table in Angular

Question

I'm very new to Angular and I'm setting up a data table to take information from a class and display information about multiple items from a row in my data source in separate rows rather than columns.

Since I can have arbitrarily many rows, I can't just hardcode all the data into the table.

The data comes from a spreadsheet where each row represents a single larger entity and each column of the spreadsheet is either a row in my table OR an associated attribute to a column in my table.

I've looked at https://material.angular.io/components/table/examples but it hasn't helped me.

Column Names: ID, Attr1_desc, Attr1_value, Attr2_desc, Attr2_value. I would like each attribute to be on a separate rows with each attr_desc and att_value to be it's own column. The table consists of data from a single row of my spreadsheet.

Since the column names aren't what I'd like the cell values to be, I'm also unsure of how to apply logic to format the name (e.g. Attr1 should be called Character instead of Attr1).

The datasource:

export interface MyData {
  ID: number,
  attr1Desc: number,
  attr1Value: string,
  attr2Desc: number,
  attr2Value: string
}

HTML:

<mat-table #table [dataSource]="dataSource">
  <ng-container matColumnDef="Attribute_No">
    <th mat-header-cell *matHeaderCellDef>Attribute No</th>
    <td mat-cell *matCellDef="let attr">
      <div *ngIf="attr == attr1">Character</div>
      <div *ngIf="attr == attr2">World</div>
    </td>
  </ng-container>
  <ng-container matColumnDef="Attr_desc">
    <th mat-header-cell *matHeaderCellDef>Attribute Description</th>
    <td mat-cell *matCellDef="let attr_desc">{{attr_desc}}</td>
  </ng-container>
  <ng-container matColumnDef="Attr_value">
    <th mat-header-cell *matHeaderCellDef>Attribute Value</th>
    <td mat-cell *matCellDef="let attr_value">{{attr_value}}</td>
  </ng-container>
  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</mat-table>

TS:

import sampleData from 'data.json';

export class RowDataComponent {
  displayedColumns: string[] = ['Attribute_No', 'Attr_desc', 'Attr_value']
  data: string[] = ['Attr_1', 'Attr_2'];
  dataSource = new MatTableDataSource(sampleData);
}

There should be three columns: Attribute, Description, Value and each row should be a different attribute. As shown here

There isn't. Hence the ngIf statements. The column name is related to the attribute (e.g. attr1 maps to Character). — pip, Aug 28 '19 at 05:01
your problem is like https://stackoverflow.com/questions/57650401/how-can-i-create-an-angular-material-design-table-with-infinite-columns-for-kno/57654075#57654075? — Eliseo, Aug 28 '19 at 06:45

Bahador Raghibizadeh · Accepted Answer · 2019-08-28T06:28:21.387

HTML:

<mat-table #table [dataSource]="dataSource">
  <ng-container matColumnDef="Attribute_No">
    <th mat-header-cell *matHeaderCellDef>Attribute No</th>
    <td mat-cell *matCellDef="let attr;let i = dataIndex;">
      <div *ngIf="i == 0">Character</div>
      <div *ngIf="i == 1">World</div>
    </td>
  </ng-container>
  <ng-container matColumnDef="Attr_desc">
    <th mat-header-cell *matHeaderCellDef>Attribute Description</th>
    <td mat-cell *matCellDef="let attr_desc">{{getValue(i, 'Desc')}}</td>
  </ng-container>
  <ng-container matColumnDef="Attr_value">
    <th mat-header-cell *matHeaderCellDef>Attribute Value</th>
    <td mat-cell *matCellDef="let attr_value">{{getValue(i, 'Value')}}</td>
  </ng-container>
  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</mat-table>

add this method to your TS:

getValue(index, type){
    return this.dataSource['attr'+(index+1)+type];
}

edited, use the `*matCellDef="let attr;let i = dataIndex;"` – Bahador Raghibizadeh Aug 28 '19 at 06:29 — Bahador Raghibizadeh, Aug 28 '19 at 06:29

score 0 · Answer 2 · answered Aug 28 '19 at 05:20

<ng-container matColumnDef="Attr_desc">
    <th mat-header-cell *matHeaderCellDef>Attribute Description</th>
    <td mat-cell *matCellDef="let attr_desc">{{attr_desc}}</td>
</ng-container>

matCellDef -> here the variable 'attr_desc' contains the element, instead you can put let element and use {{element.attr_desc}}

Use column data to fill rows in a data table in Angular

2 Answers2