Create sparse Html table - html

Question

I want to create HTML table like following
# Class Method A b c d
1 User get 10 20 30 40
set 40 30 20 10
find 40 30 20 10
2 Profile get 10 20 30 40
set 40 30 20 10
find 40 30 20 10
I have the following structure
export class Profiler {
constructor(
public classz: string,
public methodProfilers: {[key: string]: MethodProfiler;}
) {}
}
export class MethodProfiler {
constructor(
public count: number,
public totalTime: number,
public lastTotalTime: number,
public maxTime: number,
public avgTime: number,
public avgMemory: number
) {}
}
Is it possible to create such Html table using angular 4 *ngfor ? I am getting list of Profiler from back end.
getProfilerKeys(methodProfilers: Map<string, MethodProfiler>) {
return Object.keys(methodProfilers);
}
<div class="table-responsive">
<table class="table table-sm table-bordered">
<thead class="thead-default">
<tr>
<th class="text-center">Classz</th>
<th class="text-center">Method</th>
<th class="text-center">Count</th>
<th class="text-center">TotalTime</th>
<th class="text-center">LastTotalTime</th>
<th class="text-center">MaxTime</th>
<th class="text-center">AvgTime</th>
<th class="text-center">AvgMemory</th>
</tr>
</thead>
<tbody>
<tr class="text-center" *ngFor="let profiler of page.content;">
<td>{{profiler.classz}}</td>
<td>
<table>
<tr *ngFor="let key of getProfilerKeys(profiler.methodProfilers);">
<td>{{key}}</td>
</tr>
</table>
</td>
<td>
<table>
<tr *ngFor="let key of getProfilerKeys(profiler.methodProfilers);">
<td *ngFor="let subkey of getProfilerKeys(profiler.methodProfilers[key]);">{{profiler.methodProfilers[key][subkey]}}</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
</div>

Answer 1

It is more easy to achieve IMHO if you expand out the *ngFor into its <ng-template> equivalent.
Then create one td for each Profile and set the rowspan attribute on the td to be the number of "ProfilerKeys" in the array.
I use the function isNewIndex() to detect when the outer loop (Profiler objects) changes its index to draw another row-spanned td.
import { Component } from '#angular/core';
import { Profiler, MethodProfiler } from './profile';
#Component({
selector: 'my-app',
template: `
<table class="table table-sm table-bordered" width="100%">
<thead class="thead-default">
<tr>
<th class="text-center">#</th>
<th class="text-center">Class</th>
<th class="text-center">Method</th>
<th class="text-center">Count</th>
<th class="text-center">TotalTime</th>
<th class="text-center">LastTotalTime</th>
<th class="text-center">MaxTime</th>
<th class="text-center">AvgTime</th>
<th class="text-center">AvgMemory</th>
</tr>
</thead>
<tbody>
<ng-template ngFor let-profiler [ngForOf]="profilers" let-i="index">
<ng-template ngFor let-method [ngForOf]="getProfilerKeys(profiler.methodProfilers)">
<tr class="text-center">
<td *ngIf="isNewIndex(i)" [attr.rowspan]="getProfilerKeys(profiler.methodProfilers).length">{{i + 1}}</td>
<td *ngIf="isNewIndex(i, true)" [attr.rowspan]="getProfilerKeys(profiler.methodProfilers).length">{{profiler.classz}}</td>
<td>{{method}}</td>
<td>{{profiler.methodProfilers[method].count}}</td>
<td>{{profiler.methodProfilers[method].totalTime}}</td>
<td>{{profiler.methodProfilers[method].lastTotalTime}}</td>
<td>{{profiler.methodProfilers[method].maxTime}}</td>
<td>{{profiler.methodProfilers[method].avgTime}}</td>
<td>{{profiler.methodProfilers[method].avgMemory}}</td>
</tr>
</ng-template>
</ng-template>
</tbody>
</table>
`
})
export class AppComponent {
lastIndex = -1;
getProfilerKeys(methodProfilers: Map<string, MethodProfiler>) {
return Object.keys(methodProfilers);
}
// on last call to this function per row pass true for the updateIndex param
isNewIndex(thisIndex: number, updateIndex : boolean) {
if (thisIndex === this.lastIndex) return false;
if (updateIndex === true) this.lastIndex = thisIndex;
return true;
}
profilers = [
new Profiler('User',
{
'get' : new MethodProfiler(10,20,30,40,50,60),
'set' : new MethodProfiler(1,2,3,4,5,6)
}
),
new Profiler('Profile',
{
'get' : new MethodProfiler(60,50,40,30,20,10),
'set' : new MethodProfiler(6,5,4,3,2,1)
}
)
];
}
Demo: https://plnkr.co/edit/B5YYn9Jxx9nQCzxlr2VS?p=preview