模板是 angular 组件极其灵活的一个功能。大部分优秀的第三方组件都具有自定义模板的能力，而在 Data Grid 中，模板更是一个不可或缺的功能。Extensions Data Grid 的模板功能已经比较完善，单元格模板除了基本的方法外，还增加了更为简单易用的方法。
普通方法 <mtx-grid [data]="list" [columns]="columns"> </mtx-grid> <ng-template #statusTpl let-row let-index="index" let-col="colDef"> <mat-slide-toggle [checked]="row.status">Slide me!</mat-slide-toggle> </ng-template> export class AppComponent implements OnInit { @ViewChild('statusTpl', { static: true }) statusTpl: TemplateRef<any>; columns: MtxGridColumn[] = []; list = EXAMPLE_DATA; ngOnInit() { this.columns = [ { header: 'Name', field: 'name' }, { header: 'Weight', field: 'weight' }, { header: 'Gender', field: 'gender' }, { header: 'Mobile', field: 'mobile' }, { header: 'City', field: 'city' }, { header: 'Status', field: 'status', cellTemplate: this.statusTpl }, ]; } }官网示例：
引用模板实例是一种很常见的思路，但是弊端就是必须将列定义写在 ngOnInit 中，而且要先引用所用的自定义模板实例。这种写法很不灵活。
升级方案 <mtx-grid [data]="list" [columns]="columns" [cellTemplate]="{ city: cityTpl }"> </mtx-grid> <ng-template #cityTpl let-row let-index="index" let-col="colDef"> <button mat-raised-button color="primary">{{row.city}}</button> </ng-template>官网示例：
这种方法直接在组件参数中定义了模板实例，不需要再写其它任何代码，非常简单！
除了单元格模板之外，还有 headerTemplate、summaryTemplate、toolbarTemplate 等，可以满足大部分的个性化需求，详情见官网示例。
选取官网示例：
表格的行选取是一个很常见的需求，用途广泛。默认开启单元格选取，可以设置 [cellSelectable]="false" 以关闭单元格选取。
通过 [rowSelectable]="true" 可以开启行选取。
<mtx-grid [data]="list" [columns]="columns" [rowSelectable]="rowSelectable" (rowSelectionChange)="log($event)" (cellSelectionChange)="log($event)"> </mtx-grid>通过 [multiSelectable]="true" 可以设置多选行。这里有一个细节，按住 ctrl 并单击才可以多选，或者直接点击 checkbox 也可以。如果需要隐藏 checkbox，只需要设置 [hideRowSelectionCheckbox]="true"。
如果初始化表格时希望默认选中某些行，则只需要定义 [rowSelected]=[...]。
不可选取设置不可选取行的方式有两种，一种是设置 checkbox 为 disabled，另一种是隐藏 checkbox。配置非常简单，只需要通过 rowSelectionFormatter 过滤数据即可。
<mtx-grid [data]="list" [columns]="columns" [rowSelectable]="true" [rowSelectionFormatter]="rowSelectionFormatter"> </mtx-grid> export class AppComponent { columns: MtxGridColumn[] = [ { header: 'Name', field: 'name' }, { header: 'Weight', field: 'weight' }, { header: 'Gender', field: 'gender' }, { header: 'Mobile', field: 'mobile' }, { header: 'City', field: 'city' }, ]; list = EXAMPLE_DATA; rowSelectionFormatter: MtxGridRowSelectionFormatter = { disabled: (data) => data.name === 'Boron', hideCheckbox: (data) => data.name === 'Helium', }; } 行展开官网示例：
行展开的实现借助了 Angular Material 表格的 multiTemplateDataRows 参数，实现细节很多。Data Grid 的代码如下：
设置 expandable 和 expansionTemplate
<mtx-grid [data]="list" [columns]="columns" [expandable]="true" [expansionTemplate]="expansionTpl"> </mtx-grid> <ng-template #expansionTpl let-row> {{row.name}} </ng-template>在列定义中设置 showExpand, 确定在哪个列显示展开符号。
export class AppComponent { columns: MtxGridColumn[] = [ { header: 'Name', field: 'name', showExpand: true }, { header: 'Weight', field: 'weight' }, { header: 'Gender', field: 'gender' }, { header: 'Mobile', field: 'mobile' }, { header: 'City', field: 'city' }, ]; list = EXAMPLE_DATA; } 列操作官网示例：