I want to diplay data, comming from an API, to look like this:
I chose to use a vanilla HTML/CSS to be more cutomizable, instead of using material table (I don't know if I can do that using a material table, and if it's will be flexible). My html file:
<div class="dynamic-regulatory-table">
<table>
<tbody>
<tr>
<th rowspan="2">Column 1</th>
<th rowspan="2">Column 2</th>
<th rowspan="2">Column 3</th>
<th rowspan="2">Column 4</th>
<th colspan="3">Column 5</th>
<th colspan="9">Column 6</th>
<th rowspan="2">Column 7</th>
<th colspan="2" class="fix-sign-offs-name-column">Column 8</th>
<th rowspan="2" class="fix-save-name-column">Save</th>
</tr>
<tr>
<th>Column 5.1</th>
<th>Column 5.2</th>
<th>Column 5.3</th>
<th>Column 5.4</th>
<th>Column 5.5</th>
<th>Column 5.6</th>
<th>Column 5.7</th>
<th>Column 5.8</th>
<th>Column 5.9</th>
<th>Column 5.10</th>
<th>Column 5.11</th>
<th>Column 5.12</th>
<th>
<div style="width: 5px !important; ; text-align: center">
C
</div>
</th>
<th>
<div style="width: 5px !important; text-align: center">
C
</div>
</th>
</tr>
<ng-container>
<tr class="odd">
<td rowspan="3" class="align-vertical-content">line 1</td>
<td rowspan="3" class="align-vertical-content">Line 1</td>
<td class="align-vertical-content">inner line 1</td>
<td class="align-vertical-content">474922</td>
<td class="align-right-content align-vertical-content">17,1%<br /><span class="date-style">30/06/2022 </span>
</td>
<td class="align-right-content align-vertical-content">100% <span class="date-style">30/06/2022 </span></td>
<td class="align-right-content align-vertical-content">0,13 <span class="date-style">30/06/2022 </span></td>
<td rowspan="3" class="align-right-content align-vertical-content">0,00% <span class="date-style">30/06/2022
</span></td>
<td rowspan="3" class="align-right-content align-vertical-content">8,00% <span class="date-style">30/06/2022
</span></td>
<td rowspan="3" class="align-right-content align-vertical-content">10,8% <span class="date-style">30/06/2022
</span></td>
<td rowspan="3" class="align-right-content align-vertical-content">0,04% </td>
<td rowspan="3" class="align-right-content align-vertical-content">279</td>
<td rowspan="3" class="align-right-content align-vertical-content"></td>
<td rowspan="3" class="align-right-content align-vertical-content"></td>
<td rowspan="3" class="align-right-content align-vertical-content">297</td>
<td rowspan="3" class="align-right-content align-vertical-content"></td>
<td rowspan="3" class="align-vertical-content">04152022</td>
<td rowspan="3" class="align-vertical-content">
<div style="width: 5px !important">
C
</div>
</td>
<td rowspan="3" class="align-vertical-content">
<div style="width: 5px !important">
C
</div>
</td>
<td rowspan="3" class="align-vertical-content">
Save
</td>
</tr>
<tr>
<td>inner line 2</td>
<td class="align-vertical-content align-vertical-content">474922</td>
<td class="align-right-content align-vertical-content">11,1% <span class="date-style">30/06/2022 </span></td>
<td class="align-right-content align-vertical-content">17,10% <span class="date-style">30/06/2022 </span></td>
<td class="align-right-content align-vertical-content">0,13 <span class="date-style">30/06/2022 </span></td>
</tr>
<tr>
<td>inner line 3</td>
<td class="align-vertical-content align-vertical-content">474922</td>
<td class="align-right-content align-vertical-content">11,1% <span class="date-style">30/06/2022 </span></td>
<td class="align-right-content align-vertical-content">17,10% <span class="date-style">30/06/2022 </span></td>
<td class="align-right-content align-vertical-content">0,13 <span class="date-style">30/06/2022 </span></td>
</tr>
</ng-container>
<tr class="even">
<td class="align-vertical-content fix-deal-name-column">Line 2</td>
<td></td>
<td class="align-vertical-content">Inner line 3</td>
<td class="align-right-content align-vertical-content"></td>
<td class="align-right-content align-vertical-content">45% <span class="date-style">30/06/2022 </span></td>
<td class="align-right-content align-vertical-content">100% <span class="date-style">30/06/2022 </span></td>
<td class="align-right-content align-vertical-content">1,00% <span class="date-style">30/06/2022 </span></td>
<td class="align-right-content align-vertical-content">0,02% <span class="date-style">30/06/2022 </span></td>
<td class="align-right-content align-vertical-content">8,00% <span class="date-style">30/06/2022 </span></td>
<td class="align-right-content align-vertical-content">5% <span class="date-style">30/06/2022 </span></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td rowspan="2" class="align-vertical-content">
<div style="width: 5px !important">
S
</div>
</td>
<td rowspan="2" class="align-vertical-content">
<div style="width: 5px !important">
S
</div>
</td>
<td class="align-vertical-content ">
Save
</td>
</tr>
</tbody>
</table>
</div>
The stackblitz project here
It's fine when a hardcoded data (code above), but when I integrate, data from a table in TS file (see code below), I have a proble because I can't use an element of *ngFor outside of it (I have the adjacent with a fusionned one, not inner of it).
<div class="dynamic-regulatory-table">
<table>
<tbody>
<tr>
<th rowspan="2">Column 1</th>
<th rowspan="2">Column 2</th>
<th rowspan="2">Column 3</th>
<th rowspan="2">Column 4</th>
<th colspan="3">Column 5</th>
<th colspan="9">Column 6</th>
<th rowspan="2">Column 7</th>
<th colspan="2" class="fix-sign-offs-name-column">Column 8</th>
<th rowspan="2" class="fix-save-name-column">Save</th>
</tr>
<tr>
<th>Column 5.1</th>
<th>Column 5.2</th>
<th>Column 5.3</th>
<th>Column 5.4</th>
<th>Column 5.5</th>
<th>Column 5.6</th>
<th>Column 5.7</th>
<th>Column 5.8</th>
<th>Column 5.9</th>
<th>Column 5.10</th>
<th>Column 5.11</th>
<th>Column 5.12</th>
<th>
<div style="width: 5px !important; ; text-align: center">
C
</div>
</th>
<th>
<div style="width: 5px !important; text-align: center">
C
</div>
</th>
</tr>
<tr class="odd" *ngFor="let item of items">
<td [attr.rowspan]="items.length" class="align-vertical-content">{{ item.line.column1 }}</td>
<td [attr.rowspan]="items.length" class="align-vertical-content">Line 1</td>
<td class="align-vertical-content">inner line 1</td>
<td class="align-vertical-content">474922</td>
<td class="align-right-content align-vertical-content">17,1%<br /><span class="date-style">30/06/2022 </span>
</td>
<td class="align-right-content align-vertical-content">100% <span class="date-style">30/06/2022 </span></td>
<td class="align-right-content align-vertical-content">0,13 <span class="date-style">30/06/2022 </span></td>
<td [attr.rowspan]="items.length" class="align-right-content align-vertical-content">0,00% <span class="date-style">30/06/2022
</span></td>
<td [attr.rowspan]="items.length" class="align-right-content align-vertical-content">8,00% <span class="date-style">30/06/2022
</span></td>
<td [attr.rowspan]="items.length" class="align-right-content align-vertical-content">10,8% <span class="date-style">30/06/2022
</span></td>
<td [attr.rowspan]="items.length" class="align-right-content align-vertical-content">0,04% </td>
<td [attr.rowspan]="items.length" class="align-right-content align-vertical-content">279</td>
<td [attr.rowspan]="items.length" class="align-right-content align-vertical-content"></td>
<td [attr.rowspan]="items.length" class="align-right-content align-vertical-content"></td>
<td [attr.rowspan]="items.length" class="align-right-content align-vertical-content">297</td>
<td [attr.rowspan]="items.length"class="align-right-content align-vertical-content"></td>
<td [attr.rowspan]="items.length" class="align-vertical-content">04152022</td>
<td [attr.rowspan]="items.length" class="align-vertical-content">
<div style="width: 5px !important">
C
</div>
</td>
<td [attr.rowspan]="items.length" class="align-vertical-content">
<div style="width: 5px !important">
C
</div>
</td>
<td [attr.rowspan]="items.length" class="align-vertical-content">
Save
</td>
</tr>
<tr *ngFor="let innerItem of item.innerLines | slice:1">
<td>inner line 2</td>
<td class="align-vertical-content align-vertical-content">474922</td>
<td class="align-right-content align-vertical-content">11,1% <span class="date-style">30/06/2022 </span></td>
<td class="align-right-content align-vertical-content">17,10% <span class="date-style">30/06/2022 </span></td>
<td class="align-right-content align-vertical-content">0,13 <span class="date-style">30/06/2022 </span></td>
</tr>
</tbody>
</table>
</div>
With this ts file:
import { Component, VERSION } from '@angular/core';
interface itemModel {
line: { column1: string; column2: string; column3: string };
innerLines: {
innerColumn1: string;
innerColumn2: string;
innerColumn3: string;
}[];
}
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})
export class AppComponent {
title = 'app-question';
items: itemModel[] = [
{
line: { column1: 'col1', column2: 'col1', column3: 'col1' },
innerLines: [
{ innerColumn1: 'col1', innerColumn2: 'col1', innerColumn3: 'col1' },
{ innerColumn1: 'col1', innerColumn2: 'col1', innerColumn3: 'col1' },
{ innerColumn1: 'col1', innerColumn2: 'col1', innerColumn3: 'col1' },
],
},
{
line: { column1: 'col1', column2: 'col1', column3: 'col1' },
innerLines: [
{ innerColumn1: 'col1', innerColumn2: 'col1', innerColumn3: 'col1' },
{ innerColumn1: 'col1', innerColumn2: 'col1', innerColumn3: 'col1' },
],
},
{
line: { column1: 'col1', column2: 'col1', column3: 'col1' },
innerLines: [
{ innerColumn1: 'col1', innerColumn2: 'col1', innerColumn3: 'col1' },
],
},
];
}
Hope it's clear for you. there is stackblitz when I try to add dynamic data: here. Do you have any suggestion to resolve this? thank you.