角度材质mat-table行分组

撇开为其特定表提供行分组的库,我试图在 Angular Material 2 mat-table上实现这样的功能,但没有这样的功能.

填充表格的项目：

export class BasketItem{
    public id: number;
    public position: number;
    public quantity: number;
    public groupId: number;
}

Grouping rows that have same groupId property in the following table

<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>

关于如何处理行分组的任何想法？

解决方法

一个非常简单的答案是按GroupID排序,这会将这些行组合在一起.但是,我猜你想在每个组之前显示一个标题行.

你可以提供一个替代的< mat-row * matRowDef =“...使用where子句.这可以用来显示一组非默认的列.where子句接受一个函数,如果matRowDef应该返回true使用. 然后,您提供给表的数据将是散布有组行的数据行,而该函数则告诉另一个数据行.将Basic use of <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 -->

这是一个完成的stackblitz,按元素的首字母分组.

这里有一个更加发达的stackblitz只提供你想要分组的列列表,它会为你插入组行.您还可以单击组行以展开或折叠它们

最后这里是一个Github project,它修改了材料代码库中MatTableDataSource类的副本.与过滤器和排序很好地配合,但与竞争对手’竞争’,因为它们都以不同的方式限制记录的视图.