[英]How do I Group By my rows in angular mat-table
I have a detailed mat-table with expanded rows. 我有一个带有扩展行的详细的垫子表。 I want to group my rows based on Execution Date. 我想根据执行日期对行进行分组。 I am referencing this Stackblitz where they have grouped the data according to Alphabetical order. 我指的是这个Stackblitz ,他们根据字母顺序将数据分组。
Main thing that I cannot understand is Where should I place my group header code that is there in stackblitz that I am referencing. 我无法理解的主要事情是我应该在哪里放置我要引用的stackblitz中的组头代码。
In my case I have detailed mat-table and I am unable to understand where to place the code and how to group my columns based on Execution Date. 在我的情况下,我有详细的mat-table,无法理解代码的位置以及如何根据“执行日期”对列进行分组。 Can someone help me figure out how to group by in Detailed Mat-table. 有人可以帮我弄清楚如何在明细表中进行分组。
Code for HTML:- 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>
Code for TypeScript:- 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;
});
}
mat-table不支持Mater-Detail情况,您可以使用ngx-nested-data-table https://github.com/daniele-zurico/ngx-nested-data-table
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.