angular mat-table with dynamic columns and row headers for a data array

Question

The table should display the data as defined in displayedColumns. The group column has a rowspan of 2 and the row column displays the [rows.title] which is the row header and displayed for every iteration. The rest of the columns displays the data with regards to the row.title and col If anyone can help out with the table html .

//column order
let displayedColumns = ['group','row','0','1','2'];

// tabledata object
let tableData = [{
  salesHist: [1, 2, 3, 4],
  sales: [1, 2, 3, 4],
  forecastHist: [1, 2, 3, 4],
  forecast: [1, 2, 3, 4],
  group: "000",
  recordCount: "1234",
  rows: [{
    key: "forecast",
    title: "Forecast"
  }, {
    key: "sales",
    title: "Sales"
  }, {
    key: "salesHist",
    title: "Sales History"
  }]
}];

//table html
<table
  mat-table
  matSort
  [dataSource]="table"
  multiTemplateDataRows
  class="w-100"
>
  <ng-container *ngFor="let group of table" matColumnDef="group">
    <th mat-header-cell *matHeaderCellDef mat-sort-header>
      {{ group }}
    </th>
    <td mat-cell *matCellDef="let row" [attr.rowspan]="4">
      {{ group }}
    </td>
  </ng-container>

  <ng-container matColumnDef="row">
    <th mat-header-cell *matHeaderCellDef></th>
    <td mat-cell *matCellDef="let row; let i = index">
      <span *ngFor="let rowTitle of row.rows">{{ rowTitle.title }}</span>
    </td>
  </ng-container>

  <ng-container
    *ngFor="let periodCol of monthsPeriod"
    matColumnDef="{{ periodCol.col }}"
  >
    <th mat-header-cell *matHeaderCellDef>
      {{ getTitle(periodCol) }}
    </th>
    <td class="sim-row-cell" mat-cell *matCellDef="let rowTitle">
      {{ getValue(rowTitle, periodCol) }}
    </td>
  </ng-container>
  <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
  <tr mat-row *matRowDef="let element; columns: displayedColumns"></tr>
</table>

@SufailKalathil Thanks ! How do I also iterate the rows from the tableData object for the second column which acts as a row header — user11660491
– user11660491, Commented Sep 21, 2021 at 5:30

Luis Fernando · Accepted Answer · 2021-09-21 13:14:15Z

I thing this can give you some ideia to solve your issue. Take a look component.html

<app-loading *ngIf="isLoading$ | async"></lotus-app>

<div *ngIf="(isLoading$ | async) === false">
   <ng-container *ngIf="dataSource.data.length >= 1; else noData">
      <mat-table [dataSource]="dataSource" matSort>
         <ng-container *ngFor="let col of cols; let i = index" [matColumnDef]="col.key">
            <mat-header-cell *matHeaderCellDef mat-sort-header>
               {{cols[i]["display"]}}
            </mat-header-cell>
            <mat-cell *matCellDef="let element">
               <ng-container *ngIf="!col.config; else hasConfig">
                  {{element[col.key]}}
               </ng-container>
               <ng-template #hasConfig>
                  <ng-container *ngIf="col.config.isDate">
                     {{element[col.key] | date:'short'}}
                  </ng-container>
                  <ng-container *ngIf="col.config.isCurrency">
                     {{element[col.key] | currency}}
                  </ng-container>
               </ng-template>
            </mat-cell>
          </ng-container>
          <mat-header-row *matHeaderRowDef="keys"></mat-header-row>
          <mat-row *matRowDef="let row; columns: keys;"></mat-row>                                     
       </mat-table>
    </ng-container>
    <ng-template #noData>
       <h3>Ops...</h3>
       <p>There is no data...</p>
    </ng-template>
</div>

component.ts

export class Component implements OnInit {
  cols = [
    { key: 'username', display: 'User Custom displayed name in column' },
    { key: 'salary', display: 'Some coin', config: { isCurrency: true } },
    { key: 'email', display: 'email' },
    { key: 'birthday', display: 'Birthday', config: { isDate: true } }
  ];
...
component logic..
// This is important to map all keys 
get keys() { return this.cols.map(({ key }) => key); }

In that way you can add N columns, with a custom name to display You only need to set the displable name in att display and use the key att to fetch if the server response.

in the template *matHeaderRowDef="keys" will get response from get keys(), but will display in tables header the display att value

<ng-container *ngFor="let col of cols; let i = index" [matColumnDef]="col.key">
     <mat-header-cell *matHeaderCellDef mat-sort-header>
          {{cols[i]["display"]}}

...

Keep coding \m/

Collectives™ on Stack Overflow

angular mat-table with dynamic columns and row headers for a data array

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related