自 Extensions 组件库发布以来，Data Grid 成为了使用及咨询最多的组件。最开始 Data Grid 的设计非常简陋，经过一番重构，组件质量有了质的提升。
Extensions 组件库: https://github.com/ng-matero/extensions
Data Grid 示例: https://ng-matero.github.io/extensions/data-grid
距离 Data Gird 重构已经过去了两个多月，因工作忙碌而迟迟没有介绍 Data Grid 的细节。这几天又重构了一下官网示例，目前的 API 文档放在了 gitbook 上，暂时还没有和官网整合，国内访问会比较慢。本文会介绍 Data Grid 的使用方法及比较好的一些功能实现。说点题外话，开发一款插件最大的难度不在于功能的实现，而在于如何去设计插件。
什么是 Data Grid？Data Grid 本质上就是通过 数据+列定义+配置项 来渲染表格的插件。这比写一堆 DOM 结构要简洁很多，可以说是 CRUD 业务中的大杀器之一。目前市面上功能最全的 Data Grid 是 ag-grid，很多组件库也有自己的 Data Grid 实现，比如 Ignite UI，Kendo UI。但是市面上这些优秀的插件基本都要收费，另外就是遇到变态需求时，第三方插件的定制性比较困难，这也是我自研 Data Grid 的初衷。
Angular Material 对于 table 的封装已经足够灵活，但是模板的定义依然很繁琐，也缺少很多刚需功能。Data Grid 几乎整合了 Angular Material 表格的所有功能，同时又增加了很多实用功能。
Extensions Data Grid 简介Extensions Data Grid 的功能实现参考了 ag-grid 以及其它插件，重构时对变量及参数命名进行了很细致的考究。目前 Data Grid 已经实现的功能如下：
paging（分页，包括前端分页和后端分页）
sorting（排序，目前只支持单一排序）
sticky columns（列的固定）
column hiding（列的显示隐藏）
checkbox selection（数据选择）
row selection（行选取，可多选）
cell selection（单元格选取，暂时支持单选）
expandable row（可展开的表格行）
customized cell（自定义单元格）
column moving（列的移动排序）
Data Formatting（数据格式化）
Template（各种模板）
因文章篇幅有限，本文主要介绍一些重点功能，其它功能可以参考官网示例。
基本用法官网示例：
定义组件参数
<mtx-grid [data]="list" [columns]="columns"> </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; }补充介绍一下，市面上 Data Grid 定义列的方式主要有两种：
1、JS 定义，比如 ag-grid
var gridOptions = { // define 3 columns columnDefs: [ { headerName: 'Athlete', field: 'athlete' }, { headerName: 'Sport', field: 'sport' }, { headerName: 'Age', field: 'age' } ], // other grid options here... }2、模板定义，比如 Ignite UI
<igx-grid igxPreventDocumentScroll #grid1 [data]="data | async" [height]="'500px'" [autoGenerate]='false' [allowFiltering]="true"> <igx-column [field]="'Category'" [width]="'120px'"></igx-column> <igx-column [field]="'Type'" [width]="'150px'" [filterable]='false'></igx-column> <igx-column [field]="'Open Price'" [width]="'120px'" dataType="number" [formatter]="formatCurrency"> </igx-column> <igx-column [field]="'Price'" [width]="'120px'" dataType="number" [formatter]="formatCurrency"></igx-column> </igx-grid>权衡各种利弊，Extensions Data Grid 选择了第一种定义方法，接口定义如下：
export interface MtxGridColumn { field: string; header?: string; hide?: boolean; disabled?: boolean; pinned?: 'left' | 'right'; left?: string; right?: string; width?: string; resizable?: boolean; sortable?: boolean | string; type?: 'tag' | 'button' | 'link' | 'image' | 'number' | 'currency' | 'percent' | 'boolean'; tag?: MtxGridColumnTag; buttons?: MtxGridColumnButton[]; formatter?: (rowData: any, colDef?: any) => void; cellTemplate?: TemplateRef<any> | null; showExpand?: boolean; description?: string; i18n?: string; summary?: ((colData: any, colDef?: any) => void) | string; } 模板