refer : 

https://material.angular.io/cdk/table/overview

https://material.angular.io/components/table/overview

 

通常我们做 control panel 时会大量运用到 table 

尤其是处理 CRUD 时, table 更是神器

说到 table 就一定会附带以下这些东西 

filter, search 

pagination

sort

show/hide/sort columns

select row

cell display 

Table 作为高复用组件, 必须要足够抽象。

material 在这里也是一如往常的做出了数据和 ui 分离. 

这个概念和 angular directive form 是一样的. 

数据方面的处理是交给 DataSource 这个对象来负责. 

这个对象监听 filter, search, sort 等等数据的变动，然后对数据进行处理 (mat table data source 目前没有支持远程数据处理, 我们得自己实现)

然后 ui table 通过监听 data source 来获取新数据. 

各种小组件, mat-sort, mat-pagination 则是负责监听 ui 操作.

所以是

data source 监听操作小组件 -> 更新 source 

ui table 监听 data source -> 渲染

这个就是大致上架构的设计啦，我们只能跟着做了

 

 

下面说说常用的东西. 

1. max-text-column, 这个就是一个方便啦. 因为大部分都是 display string 吗.

<mat-text-column name="score"></mat-text-column>

源码是很简单的

@Component({
  moduleId: module.id,
  selector: 'mat-text-column',
  template: `
    <ng-container matColumnDef>
      <th mat-header-cell *matHeaderCellDef [style.text-align]="justify">
        {{headerText}}
      </th>
      <td mat-cell *matCellDef="let data" [style.text-align]="justify">
        {{dataAccessor(data, name)}}
      </td>
    </ng-container>
  `,
  encapsulation: ViewEncapsulation.None, 
  changeDetection: ChangeDetectionStrategy.Default,
})
export class MatTextColumn<T> extends CdkTextColumn<T> {
}

通过 CdkTextColumn @input 去修改 header or cell, 

@Input() headerText: string;
@Input() dataAccessor: (data: T, name: string) => string;