自定义单元格模板，仅在非编辑模式下应用，应用模板后，相关格式化设置将换效。

为列属性 `template` 设置自定义模板，

在html 模板中定义单元格模板，ctx 为数据上下文，相关属性说明如下：

- `rowData`: 行数据
- `rowIndex`: 行索引

```html
<farris-datagrid
    [fit]="true" [pagination]="false"
    [virtualized]="false"
    [fitColumns]="true" [columns]="columns" [data]="items">
</farris-datagrid>


<ng-template #opCell let-ctx>
    <a href="javascript: void(0);" title="F12 看一下" (click)="edit(ctx)">编辑</a>
    &nbsp;&nbsp;    
    <a  href="javascript: void(0);" title="F12 看一下" (click)="remove(ctx)">删除</a>
</ng-template>

```

```javascript
import { Component, OnInit, ViewChild, TemplateRef } from '@angular/core';
import { CalculationType } from '@farris/ui-datagrid';
import { DemoDataService } from '../../demo-data.service';
import { DemoDataSeed } from '../../demo-data-seed';

@Component({
    selector: 'demo-template',
    templateUrl: './demo-cell-template.component.html',
    providers: [
        DemoDataService
    ]
})
export class DemoCellTemplateComponent implements OnInit {
    columns = [];
    items;

    fitColumns = true;
    enumData = DemoDataSeed.enumData();
    enumOpts = { valueField: 'value', textField: 'label', data: this.enumData };

    // 获取定义的单元格模板
    @ViewChild('opCell') opCell: TemplateRef<any>;

    constructor(private dds: DemoDataService) { }

    ngOnInit(): void {

        this.columns = [
            { field: 'id', width: 100, title: 'ID', footer: {
                options: { text: '合计'},
                formatter: (v, d, i) => {
                    return `<b>${v}</b>`;
                }
            }},
            { field: 'name', width: 130, title: '姓名'},
            { field: 'sex', width: 70, title: '性别', formatter: this.customeFieldFormatter },
            { field: 'birthday', width: 120, title: '出生日期',
                formatter: {
                    type: 'datetime',
                    options: {format: 'yyyy年MM月dd日' }
                }
            },
            { field: 'maray', width: 70, title: '婚否', formatter: { type: 'boolean', options: { trueText: '已婚', falseText: '未婚' }}},
            { field: 'addr', width: 170, title: '地址' },
            { field: 'company', width: 100, title: '公司'},
            { field: 'nianxin', width: 170, title: '年薪', footer: {
                    options: { calculationType: CalculationType.sum},
                    formatter: { type: 'number', options: { prefix: '￥', suffix: '元', precision: 2 }}
                },
                formatter: { type: 'number', options: { prefix: '￥', suffix: '元', precision: 2 } }
            },
            { field: 'zhiwei', width: 100, title: '职位', formatter: {type: 'enum', options: this.enumOpts} },
            
            { title: '操作', width: 160,
                template: this.opCell,  // 在此应用单元格模板
                halign: 'center', align: 'center' 
            }
        ];

        this.items = this.dds.createData(50);
    }

    customeFieldFormatter = (val, data) => {
        if (val === '女') {
            return '👩';
        }
        return '👨';
    }

    edit(ctx) {
        console.log('编辑', ctx);
    }

    remove(ctx) {
        console.log('删除', ctx);
    }
}
```