I have an object with two properties: person and vehicle. Both properties consist of arrays of data. I have separate column headings for the person and vehicle properties and display the data in tabular form. However, the column headings for both properties are not aligned. Can someone assist me with this issue?
import { Component } from "@angular/core";
@Component({
selector: "app-root",
templateUrl: "./app.component.html",
styleUrls: ["./app.component.scss"]
})
export class AppComponent {
personColumns = ["Name", " Age", "Department"];
vehicleColumns = ["Model", "Color", "Company"]
values = {
person: [
{
name: "John",
age: 28,
department: "Accounting"
},
{
name: "Max",
age: 26,
department: "Sports"
},
{
name: "Rose",
age: 24,
department: "Arts"
}
],
vehicle: [
{
model: "SEDAN",
color: "Red",
compay: "Mercedes"
},
{
model: "COUPE",
color: "White",
compay: "BMW"
},
{
model: "SUV",
color: "Yellow",
compay: "AUDI"
}
]
};
}
In the component.html file
<div *ngIf="values != []">
<span *ngIf="values.person">
<div class="table-responsive">
<table class="table table-striped">
<thead>
<tr>
<th class="p-1" *ngFor="let column of personColumns">
{{ column }}
</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let value of values.person">
<ng-container *ngIf="value.name != 'Max'">
<td class="p-1">
{{ value.name }}
</td>
<td class="p-1">
{{ value.age }}
</td>
<td class="p-1">
{{ value.department }}
</td>
</ng-container>
<ng-container *ngIf="value.name == 'Max'">
<td class="p-1">
{{ value.name }}
</td>
<td class="p-1">
{{ value.age }}
</td>
<td class="p-1">
{{ value.department + " changed to" + " IT" }}
</td>
</ng-container>
</tr>
</tbody>
</table>
</div>
</span>
<span *ngIf="values.vehicle">
<div class="table-responsive">
<table class="table table-striped">
<thead>
<tr>
<th class="p-1" *ngFor="let column of vehicleColumns">
{{ column }}
</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let value of values.vehicle">
<ng-container *ngIf="value.model != 'SUV'">
<td class="p-1">
{{ value.model }}
</td>
<td class="p-1">
{{ value.color }}
</td>
<td class="p-1">
{{ value.compay }}
</td>
</ng-container>
<ng-container *ngIf="value.model == 'SUV'">
<td class="p-1">
{{ value.model }}
</td>
<td class="p-1">
{{ value.color }}
</td>
<td class="p-1">
{{ value.compay + " changed to" + " Ford" }}
</td>
</ng-container>
</tr>
</tbody>
</table>
</div>
In app.component.scss
@import "../styles.scss";
.table thead th {
vertical-align: top;
}
th {
white-space: nowrap;
cursor: pointer;
user-select: none;
color: grey;
}
table {
margin: 0;
font-family: "Lato";
font-size: 12px;
}
.table-responsive {
min-height: 60px;
}
.cell {
max-width: 250px;
white-space: nowrap;
overflow: hidden;
display: inline-block;
text-overflow: ellipsis;
}
.table thead th {
vertical-align: top;
}