I am not well versed with angular, I got the html file as below
<div class="mat-elevation-z8">
<table mat-table [dataSource]="resultssummaries" multiTemplateDataRows class="mat-elevation-z8" matSort width="100%">
<!--- Note that these columns can be defined in any order.
The actual rendered columns are set as a property on the row definition" -->
<!-- Currency Code Column -->
<ng-container matColumnDef="id">
<th mat-header-cell *matHeaderCellDef mat-sort-header> id </th>
<td mat-cell *matCellDef="let resultssummaries" align="left"> {{resultssummaries.id}} </td>
</ng-container>
<!-- Currency Symbol Column -->
<ng-container matColumnDef="build">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Build Version </th>
<td mat-cell *matCellDef="let resultssummaries" align="left"> {{resultssummaries.buildversion}} </td>
</ng-container>
<!-- Base Name Column -->
<ng-container matColumnDef="host">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Host Name </th>
<td mat-cell *matCellDef="let resultssummaries" align="left"> {{resultssummaries.hostAddress}} </td>
</ng-container>
<!-- Fraction Symbol Column -->
<ng-container matColumnDef="tests">
<th mat-header-cell *matHeaderCellDef align="center"> All Tests </th>
<td mat-cell *matCellDef="let resultssummaries" align="left"> {{resultssummaries.alltests}} </td>
</ng-container>
<!-- Fraction Name Column -->
<ng-container matColumnDef="pass">
<th mat-header-cell *matHeaderCellDef> All Pass </th>
<td mat-cell *matCellDef="let resultssummaries" align="left"> {{resultssummaries.allpass}} </td>
</ng-container>
<ng-container matColumnDef="fails">
<th mat-header-cell *matHeaderCellDef> All Errors </th>
<td mat-cell *matCellDef="let resultssummaries" align="left"> {{resultssummaries.allfails}} </td>
</ng-container>
<ng-container matColumnDef="errors">
<th mat-header-cell *matHeaderCellDef> All Errors </th>
<td mat-cell *matCellDef="let resultssummaries" align="left"> {{resultssummaries.allerrors}} </td>
</ng-container>
<ng-container matColumnDef="expandedDetail">
<td mat-cell *matCellDef="let resultssummaries" [attr.colspan]="displayedColumns.length">
<div class="example-element-detail"
[@detailExpand]="element == expandedElement ? 'expanded' : 'collapsed'" >
<table mat-table [dataSource]="resultssummaries.testsummary" multiTemplateDataRows class="mat-elevation-z8" matSort width="100%">
<!--- Note that these columns can be defined in any order.
The actual rendered columns are set as a property on the row definition" -->
<!-- Currency Code Column -->
<ng-container matColumnDef="package">
<th mat-header-cell *matHeaderCellDef mat-sort-header> package name </th>
<td mat-cell *matCellDef="let test" align="left">{{test.packageName}}</td>
</ng-container>
<!-- Currency Symbol Column -->
<ng-container matColumnDef="tests">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Tests </th>
<td mat-cell *matCellDef="let test" align="left"> {{test.tests}} </td>
</ng-container>
<!-- Base Name Column -->
<ng-container matColumnDef="fail">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Fail </th>
<td mat-cell *matCellDef="let test" align="left"> {{ test.fail }} </td>
</ng-container>
<!-- Fraction Symbol Column -->
<ng-container matColumnDef="error">
<th mat-header-cell *matHeaderCellDef> Error </th>
<td mat-cell *matCellDef="let test" align="left"> {{test.error }} </td>
</ng-container>
<!-- Fraction Name Column -->
<ng-container matColumnDef="pass">
<th mat-header-cell *matHeaderCellDef> Pass </th>
<td mat-cell *matCellDef="let test" align="left">{{test.pass}} </td>
</ng-container>
<ng-container matColumnDef="expandedDetail1">
<td mat-cell *matCellDef="let test" [attr.colspan]="displayedColumns.length">
<div class="example-element-detail">
<table mat-table [dataSource]="test.testcases" class="mat-elevation-z8" matSort width="100%">
<ng-container matColumnDef="date">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Date </th>
<td mat-cell *matCellDef="let testcase" align="left">{{testcase.date}}</td>
</ng-container>
<!-- Currency Symbol Column -->
<ng-container matColumnDef="class">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Class </th>
<td mat-cell *matCellDef="let testcase" align="left"> {{testcase.className}} </td>
</ng-container>
<!-- Base Name Column -->
<ng-container matColumnDef="testname">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Test Name </th>
<td mat-cell *matCellDef="let testcase" align="left"> {{ testcase.testName }} </td>
</ng-container>
<ng-container matColumnDef="rrn">
<th mat-header-cell *matHeaderCellDef> RRN </th>
<td mat-cell *matCellDef="let testcase" align="left"> {{testcase.rrn }} </td>
</ng-container>
<ng-container matColumnDef="endpoints">
<th mat-header-cell *matHeaderCellDef> End Points </th>
<td mat-cell *matCellDef="let testcase" align="left">{{testcase.endpoints}} </td>
</ng-container>
<ng-container matColumnDef="result">
<th mat-header-cell *matHeaderCellDef> Result </th>
<td mat-cell *matCellDef="let testcase" align="left">{{testcase.result}} </td>
</ng-container>
<ng-container matColumnDef="failreason">
<th mat-header-cell *matHeaderCellDef> Result </th>
<td mat-cell *matCellDef="let testcase" align="left">{{testcase.failReason}} </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumnsTestcase"></tr>
<tr mat-row *matRowDef="let element; columns: displayedColumnsTestcase;">
</tr>
</table>
</div>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumnsTestSummary"></tr>
<tr mat-row *matRowDef="let element1; columns: displayedColumnsTestSummary;"
class="example-element-row"
[class.example-expanded-row]="expandedElement1 === element"
(click)="expandedElement1 = expandedElement1 === element ? null : element">
</tr>
<tr mat-row *matRowDef="let row; columns: ['expandedDetail1']" class="example-detail-row"></tr>
</table>
</div>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let element; columns: displayedColumns;"
class="example-element-row"
[class.example-expanded-row]="expandedElement === element"
(click)="expandedElement = expandedElement === element ? null : element">
</tr>
<tr mat-row *matRowDef="let row; columns: ['expandedDetail']" class="example-detail-row"></tr>
</table>
my component.ts
@Component({
selector: 'jhi-resultssummary',
templateUrl: './resultssummary.component.html',
styleUrls: ['resultsummary.entity.css'],
animations: [
trigger('detailExpand', [
state('collapsed', style({height: '0px', minHeight: '0', display: 'none'})),
state('expanded', style({height: '*'})),
transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
]),
],
})
export class ResultssummaryComponent extends DataSource<any> implements OnInit, OnDestroy {
currentAccount: any;
// testsummary : ITestSummary;
resultssummaries: IResultssummary[];
error: any;
success: any;
eventSubscriber: Subscription;
routeData: any;
links: any;
totalItems: any;
queryCount: any;
itemsPerPage: any;
page: any;
predicate: any;
previousPage: any;
reverse: any;
displayedColumns: string[] = ['id', 'build', 'host', 'tests', 'pass', 'errors', 'fails'];
displayedColumnsTestSummary: string[] = ['package', 'tests', 'fail', 'error', 'pass'];
displayedColumnsTestcase: string[] = ['date', 'class', 'testname', 'rrn', 'endpoints', 'result', 'failreason'];
dataSource = new MatTableDataSource<IResultssummary>(this.resultssummaries);
expandedElement: any;
expandedElement1: any;
constructor(
private resultssummaryService: ResultssummaryService,
private parseLinks: JhiParseLinks,
private jhiAlertService: JhiAlertService,
private principal: Principal,
private activatedRoute: ActivatedRoute,
private router: Router,
private eventManager: JhiEventManager
) {
super();
this.itemsPerPage = ITEMS_PER_PAGE;
this.routeData = this.activatedRoute.data.subscribe(data => {
this.page = data.pagingParams.page;
this.previousPage = data.pagingParams.page;
this.reverse = data.pagingParams.ascending;
this.predicate = data.pagingParams.predicate;
});
}
isExpansionDetailRow = (i: number, row: Object) => row.hasOwnProperty('detailRow');
isExpansionDetailRow1 = (i: number, row: Object) => row.hasOwnProperty('detailRow');
connect(): Observable<Element[]> {
const rows = [];
this.resultssummaries.forEach(element => rows.push(element, { detailRow: true, element }));
console.log(rows);
return of(rows);
}
disconnect() { }
loadAll() {
this.resultssummaryService
.query({
page: this.page - 1,
size: this.itemsPerPage,
sort: this.sort()
})
.subscribe(
(res: HttpResponse<IResultssummary[]>) => this.paginateResultssummaries(res.body , res.headers),
(res: HttpErrorResponse) => this.onError(res.message),
);
}
loadPage(page: number) {
if (page !== this.previousPage) {
this.previousPage = page;
this.transition();
}
}
transition() {
this.router.navigate(['/resultssummary'], {
queryParams: {
page: this.page,
size: this.itemsPerPage,
sort: this.predicate + ',' + (this.reverse ? 'asc' : 'desc')
}
});
this.loadAll();
}
clear() {
this.page = 0;
this.router.navigate([
'/resultssummary',
{
page: this.page,
sort: this.predicate + ',' + (this.reverse ? 'asc' : 'desc')
}
]);
this.loadAll();
}
ngOnInit() {
this.loadAll();
this.principal.identity().then(account => {
this.currentAccount = account;
});
this.registerChangeInResultssummaries();
}
ngOnDestroy() {
this.eventManager.destroy(this.eventSubscriber);
}
trackId(index: number, item: IResultssummary) {
return item.id;
}
registerChangeInResultssummaries() {
this.eventSubscriber = this.eventManager.subscribe('resultssummaryListModification', response => this.loadAll());
}
sort() {
const result = [this.predicate + ',' + (this.reverse ? 'asc' : 'desc')];
if (this.predicate !== 'id') {
result.push('id');
}
return result;
}
private paginateResultssummaries(data: IResultssummary[], headers: HttpHeaders) {
this.links = this.parseLinks.parse(headers.get('link'));
this.totalItems = parseInt(headers.get('X-Total-Count'), 10);
this.queryCount = this.totalItems;
this.resultssummaries = data;
this.resultssummaries = data.map(resultsummaries => new Resultssummary().deserialize(resultsummaries));
console.log(this.resultssummaries);
/*this.testsummary = testsummary1['testsummary'][0];
console.log(this.testsummary["tests"]);
console.log("testsummary");
console.log(testsummary1);
console.log(data1); */
}
private onError(errorMessage: string) {
this.jhiAlertService.error(errorMessage, null, null);
}
}
I am able to put nested tables as i expect but when i click expand or class its not working ,for example when i click
- the master row all the rows are expanded
- by default all the rows are in expanded mode
- when i click the child no expansion or collapse is happening
it will be great if you could help to fix this expand or collapse , expected
- when master row is clicked only that row is expanded
- on expansion of master node it should show only the immediate child
- when the child is clicked the immediate table show
- the same logic goes in collapse
thanks in advance
