I've nested tables, when a row is clicked I need to display data underneath the table row. However, the data is being displayed at the end of ngRepeat.
HTML:
<table class="table table-hover table-bordered table-responsive-xl">
<thead>
<th> Name </th>
<th> Place </th>
<th> Phone </th>
</thead>
<tbody>
<tr *ngFor="let data of data1" (click) ="expand()">
<td> +{{data.name}} </td>
<td> {{data.place}} </td>
<td> {{data.phone}} </td>
<td> {{data.hobbies}} </td>
<td> {{data.profession}} </td>
</tr>
<ng-container *ngIf="expandContent">
<tr *ngFor="let data of data2">
<td> {{data.datades.name}} </td>
<td> {{data.datades.hobbies}} </td>
<td> {{data.datades.profession}} </td>
</tr>
</ng-container>
</tbody>
</table>
Component :
export class AppComponent {
expandContent = true;
data1 =[{
'name' : 'john',
'place' : 'forest',
'phone' : '124-896-8963'
},{
'name' : 'Jay',
'place' : 'City',
'phone' : '124-896-1234'
}, {
'name' : 'Joseph',
'place' : 'sky',
'phone' : '124-896-9632'
},
]
data2 =[{
'whoseData' : 'john',
'datades' : {
'name' : 'john',
'hobbies' : 'singing',
'profession' : 'singer'
}
},{
'whoseData' : 'Jay',
'datades' : {
'name' : 'jay',
'hobbies' : 'coding',
'profession' : 'coder'
}
}
]
expand(){
this.expandContent = !this.expandContent
}
}
When the first row is clicked I would like to display, the data associated with the first row, under it.
Expected result
DEMO
There will be a button on top of the grid, a user can click on that button to expand/ collapse multiple rows in the tables. Let’s start… We’ll create a new Angular project using the Ng CLI tool.
As you can see, it’s a very Bootstrap looking table. When the “View” button is clicked, the row will expand to show more content. Let’s take a look at the code. In the dashboard.component.html file, the main table is defined and Angular’s “ngFor” is utilized to loop through the data coming back from the API.
On top of the table, two buttons will be able to expand or collapse all the rows of the table at once. The rows of tables will be having an optional boolean property expanded to know which row is in an expanded state. How to Add Expand Collapse in Material Datatable Rows?
We’ll demonstrate expand-collapse using both ways. On top of the table, two buttons will be able to expand or collapse all the rows of the table at once. The rows of tables will be having an optional boolean property expanded to know which row is in an expanded state.
You would need to make these changes:
ngFor
loop iterationexpanded
property to the data
objects, instead of having the global expandContent
The template could look as follows:
<ng-container *ngFor="let data of data1">
<tr (click)="data.expanded = !data.expanded">
<td> {{ data.expanded ? '–' : '+'}} {{data.name}} </td>
<td> {{data.place}} </td>
<td> {{data.phone}} </td>
<td> {{data.hobbies}} </td>
<td> {{data.profession}} </td>
</tr>
<ng-container *ngIf="data.expanded">
<tr *ngFor="let details of findDetails(data)">
<td> {{details.datades.name}} </td>
<td> {{details.datades.hobbies}} </td>
<td> {{details.datades.profession}} </td>
</tr>
</ng-container>
</ng-container>
where findDetails
is defined as:
findDetails(data) {
return this.data2.filter(x => x.whoseData === data.name);
}
See this stackblitz for a demo.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With