У меня есть подробная таблица с расширенными строками.Я хочу сгруппировать свои строки на основе даты выполнения.Я ссылаюсь на этот Stackblitz , где они сгруппировали данные в алфавитном порядке.
Главное, что я не могу понять, это где я должен разместить свой код заголовка группы, который там в stackblitz, который яЯ ссылаюсь.
В моем случае у меня есть подробная таблица соответствия, и я не могу понять, где разместить код и как сгруппировать мои столбцы на основе даты выполнения.Может кто-нибудь помочь мне разобраться, как группировать в Подробной таблице Mat.
Код для HTML: -
<div class="main-content">
<div class="card">
<div class="card-header">
<h5 class="title">Job Execution Stats</h5>
</div>
<div class="table-filter">
<mat-form-field>
<span matSuffix> <i class="material-icons">search</i> </span>
<input
type="search"
matInput
(keyup)="applyFilter($event.target.value)"
placeholder="Filter"
/>
</mat-form-field>
</div>
<div class="table-filter">
<mat-form-field>
<mat-select placeholder="Select Current Time Period">
<mat-option *ngFor="let food of foods" [value]="food.value">
{{ food.viewValue }}
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field>
<mat-select placeholder="Select Previos Time Period">
<mat-option *ngFor="let food of foods" [value]="food.value">
{{ food.viewValue }}
</mat-option>
</mat-select>
</mat-form-field>
</div>
<table
mat-table
[dataSource]="jobExecutionList"
multiTemplateDataRows
class="mat-elevation-z8"
>
<ng-container
matColumnDef="{{ column }}"
*ngFor="let column of columnsToDisplay"
>
<th mat-header-cell *matHeaderCellDef>{{ column }}</th>
<td mat-cell *matCellDef="let element">
{{ element[column] }}
</td>
</ng-container>
<!-- Expanded Content Column - The detail row is made up of this one column that spans across all columns -->
<ng-container matColumnDef="expandedDetail">
<td mat-cell *matCellDef="let element" [attr.colspan]="1">
<div
class="example-element-detail"
[@detailExpand]="
element == expandedElement
? 'expanded'
: 'collapsed'
"
>
<table mat-table [dataSource]="jobExecutionList">
<!-- Position Column -->
<ng-container matColumnDef="id">
<th mat-header-cell *matHeaderCellDef>ID</th>
<td mat-cell *matCellDef="let element2">
{{ element2.id }}
</td>
</ng-container>
<!-- Name Column -->
<ng-container matColumnDef="executionDate">
<th mat-header-cell *matHeaderCellDef>
Execution Date
</th>
<td mat-cell *matCellDef="let element2">
{{
element2.executionDate
| date: 'yyyy-MM-dd'
}}
</td>
</ng-container>
<!-- Name Column -->
<ng-container matColumnDef="lable">
<th mat-header-cell *matHeaderCellDef>
Label
</th>
<td mat-cell *matCellDef="let element2">
{{ element2.lable }}
</td>
</ng-container>
<!-- Weight Column -->
<ng-container matColumnDef="previousTimePeriod">
<th mat-header-cell *matHeaderCellDef>
Previous Time Period
</th>
<td mat-cell *matCellDef="let element2">
{{ element2.previousTimePeriod }}
</td>
</ng-container>
<!-- Symbol Column -->
<ng-container matColumnDef="afterTimePeriod">
<th mat-header-cell *matHeaderCellDef>
After Time Period
</th>
<td mat-cell *matCellDef="let element2">
{{ element2.afterTimePeriod }}
</td>
</ng-container>
<!-- Symbol Column -->
<ng-container matColumnDef="status">
<th mat-header-cell *matHeaderCellDef>
Status
</th>
<td mat-cell *matCellDef="let element2">
{{ element2.status }}
</td>
</ng-container>
<tr
mat-header-row
*matHeaderRowDef="
columnsToDisplay2;
sticky: true
"
></tr>
<tr
mat-row
*matRowDef="
let row2;
columns: columnsToDisplay2
"
></tr>
</table>
</div>
</td>
</ng-container>
<tr
mat-header-row
*matHeaderRowDef="columnsToDisplay; sticky: true"
></tr>
<tr
mat-row
*matRowDef="let element; columns: columnsToDisplay"
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>
</div>
Код для TypeScript: -
export class JobExecutionScreenComponent implements OnInit {
columnsToDisplay = [
'executionDate',
'previousTimePeriod',
'afterTimePeriod'
];
columnsToDisplay2 = [
'id',
'lable',
'executionDate',
'previousTimePeriod',
'afterTimePeriod',
'status'
];
expandedElement: Element | null;
ngOnInit() {
this.rendertable();
rendertable() {
const project = JSON.parse(this.dataService.getObject('project'));
this.recommendationService
.getJobList(project.id)
.subscribe(data => {
this.jobExecutionList = new MatTableDataSource();
this.jobExecutionList.data = data;
this.jobExecutionList.sort = this.sort;
this.jobExecutionList.paginator = this.paginator;
});
}