提供するライブラリは別として行のグループ化特定のテーブルでは、私はそのような機能を実装しようとしていますAngular Material 2 マットテーブルそのような機能は付属していません。
テーブルに入力する項目:
export class BasketItem{
public id: number;
public position: number;
public quantity: number;
public groupId: number;
}
同じ行をグループ化するグループID次の表のプロパティ
<mat-table class="mat-elevation-z8" [dataSource]="dataSource" multiTemplateDataRows matSort matSortActive="position" matSortDirection="asc" matSortDisableClear >
<!-- Position Column -->
<ng-container matColumnDef="position">
<mat-header-cell *matHeaderCellDef mat-sort-header>
<b>Position</b>
</mat-header-cell>
<mat-cell *matCellDef="let basketItem">{{basketItem.position}}</mat-cell>
</ng-container>
<!-- Quantity Column -->
<ng-container matColumnDef="quantity">
<mat-header-cell *matHeaderCellDef>
<b>Quantity</b>
</mat-header-cell>
<mat-cell *matCellDef="let basketItem">{{basketItem.quantity}}</mat-cell>
</ng-container>
<!-- GroupId Column -->
<ng-container matColumnDef="position">
<mat-header-cell *matHeaderCellDef mat-sort-header>
<b>GroupId </b>
</mat-header-cell>
<mat-cell *matCellDef="let basketItem">{{basketItem.GroupId }}</mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let basketItem; columns: displayedColumns;" (click)="onSelect(basketItem)"></mat-row>
</mat-table>
どのようにすればよいか行のグループ化アプローチできますか?
ベストアンサー1
非常に簡単な答えは、GroupID で並べ替えることです。これにより、それらの行がグループにまとめられます。ただし、各グループの前にヘッダー行を表示する必要があると思います。
where 句を使用する代替手段を提供することができます<mat-row *matRowDef="...
。これを使用して、デフォルト以外の列セットを表示できます。where 句は、その matRowDef を使用する必要がある場合に true を返す関数を取ります。
テーブルに入力するデータは、データ行とグループ行が混在したデータ行となり、関数はそれらを区別します。基本的な使い方<table mat-table>
まず、グループを手動で追加し、where 句関数を app/table-basic-example.ts に追加します。
import {Component} from '@angular/core';
export interface PeriodicElement {
name: string;
position: number;
weight: number;
symbol: string;
}
export interface Group {
group: string;
}
const ELEMENT_DATA: (PeriodicElement | Group)[] = [
{group: "Group 1"},
{position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H'},
{position: 2, name: 'Helium', weight: 4.0026, symbol: 'He'},
{position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li'},
{position: 4, name: 'Beryllium', weight: 9.0122, symbol: 'Be'},
{group: "Group 2"},
{position: 5, name: 'Boron', weight: 10.811, symbol: 'B'},
{position: 6, name: 'Carbon', weight: 12.0107, symbol: 'C'},
{position: 7, name: 'Nitrogen', weight: 14.0067, symbol: 'N'},
{group: "Group 3"},
{position: 8, name: 'Oxygen', weight: 15.9994, symbol: 'O'},
{position: 9, name: 'Fluorine', weight: 18.9984, symbol: 'F'},
{position: 10, name: 'Neon', weight: 20.1797, symbol: 'Ne'},
];
/**
* @title Basic use of `<table mat-table>`
*/
@Component({
selector: 'table-basic-example',
styleUrls: ['table-basic-example.css'],
templateUrl: 'table-basic-example.html',
})
export class TableBasicExample {
displayedColumns: string[] = ['position', 'name', 'weight', 'symbol'];
dataSource = ELEMENT_DATA;
isGroup(index, item): boolean{
return item.group;
}
}
/** Copyright 2018 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license */
そして、groupHeader 列と追加の matRowDef を app/table-basic-example.html に追加します。
<mat-table [dataSource]="dataSource" class="mat-elevation-z8">
<!--- Note that these columns can be defined in any order.
The actual rendered columns are set as a property on the row definition" -->
<!-- Position Column -->
<ng-container matColumnDef="position">
<mat-header-cell *matHeaderCellDef> No. </mat-header-cell>
<mat-cell *matCellDef="let element"> {{element.position}} </mat-cell>
</ng-container>
<!-- Name Column -->
<ng-container matColumnDef="name">
<mat-header-cell *matHeaderCellDef> Name </mat-header-cell>
<mat-cell *matCellDef="let element"> {{element.name}} </mat-cell>
</ng-container>
<!-- Weight Column -->
<ng-container matColumnDef="weight">
<mat-header-cell *matHeaderCellDef> Weight </mat-header-cell>
<mat-cell *matCellDef="let element"> {{element.weight}} </mat-cell>
</ng-container>
<!-- Symbol Column -->
<ng-container matColumnDef="symbol">
<mat-header-cell *matHeaderCellDef> Symbol </mat-header-cell>
<mat-cell *matCellDef="let element"> {{element.symbol}} </mat-cell>
</ng-container>
<ng-container matColumnDef="groupHeader">
<mat-cell *matCellDef="let group">{{group.group}}</mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
<mat-row *matRowDef="let row; columns: ['groupHeader']; when: isGroup"> </mat-row>
</mat-table>
<!-- Copyright 2018 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license -->
完成したのはこちらスタックブリッツ要素の最初の文字でグループ化します。
そしてこちらははるかに発展したスタックブリッツグループ化したい列のリストを入力するだけで、グループ行が挿入されます。グループ行をクリックして展開したり折りたたんだりすることもできます。
そして最後に、Githubプロジェクトマテリアル コードベースから MatTableDataSource クラスのコピーを変更します。フィルターと並べ替えではうまく機能しますが、ページネーターと「競合」します。どちらも異なる方法でレコードの表示を制限するためです。