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



<ng-template #nameTemp let-ctx>
    <div class="f-datagrid-cell-formgroup farris-group-auto">
        <input type="text" class="form-control" name="name" [(ngModel)]="ctx.rowData['name']">
    </div>
</ng-template>
<ng-template #sexTemp let-ctx>
    <div class="f-datagrid-cell-formgroup farris-group-auto">
        <input type="text" class="form-control" [(ngModel)]="ctx.rowData['sex']" name="sex">
    </div>
</ng-template>
<ng-template #birthdayTemp let-ctx>
    <div class="f-datagrid-cell-formgroup farris-group-auto">
        <input type="text" class="form-control" [(ngModel)]="ctx.rowData['birthday']" name="birthday">
    </div>
</ng-template>
<ng-template #marayTemp let-ctx>
    <div class="f-datagrid-cell-formgroup farris-group-auto">
        <input type="text" class="form-control" [(ngModel)]="ctx.rowData['maray']" name="maray">
    </div>
</ng-template>
<ng-template #addrTemp let-ctx>
    <div class="f-datagrid-cell-formgroup farris-group-auto">
        <input type="text" class="form-control" [(ngModel)]="ctx.rowData['addr']" name="addr">
    </div>
</ng-template>
<ng-template #companyTemp let-ctx>
    <div class="f-datagrid-cell-formgroup farris-group-auto">
        <input type="text" class="form-control" [(ngModel)]="ctx.rowData['company']" name="company">
    </div>
</ng-template>

<ng-template #nianxinTemp let-ctx>
    <div class="f-datagrid-cell-formgroup farris-group-auto">
        <input type="text" class="form-control" [(ngModel)]="ctx.rowData['nianxin']" name="nianxin">
    </div>
</ng-template>

<ng-template #zhiweiTemp let-ctx>
    <div class="f-datagrid-cell-formgroup farris-group-auto">
        <input type="text" class="form-control" [(ngModel)]="ctx.rowData['zhiwei']" name="zhiwei">
    </div>
</ng-template>

```

```javascript
import { Component, OnInit, ViewChild, ElementRef, TemplateRef } from '@angular/core';

import { DATAGRID_REST_SERVICEE, DatagridComponent } from '@farris/ui-datagrid';
import { DemoDataService } from '../../demo-data.service';
import { DemoDataSeed } from '../../demo-data-seed';

@Component({
    selector: 'demo-datagrid-border',
    templateUrl: './demo-custom-edit-row.component.html',
    providers: [
        { provide: DATAGRID_REST_SERVICEE, useClass: DemoDataService }
    ]
})
export class DemoCustomEditRowComponent implements OnInit {
    columns = [];
    items;
    total = 0;
    pageSize = 100;

    showRowNumber = true;
    showBorder = true;
    striped = false;

    @ViewChild('dg') dg: DatagridComponent;
    @ViewChild('nameTemp') nameTemp: TemplateRef<any>;
    @ViewChild('sexTemp') sexTemp: TemplateRef<any>;
    @ViewChild('birthdayTemp') birthdayTemp: TemplateRef<any>;
    @ViewChild('marayTemp') marayTemp: TemplateRef<any>;
    @ViewChild('addrTemp') addrTemp: TemplateRef<any>;
    @ViewChild('companyTemp') companyTemp: TemplateRef<any>;
    @ViewChild('nianxinTemp') nianxinTemp: TemplateRef<any>;
    @ViewChild('zhiweiTemp') zhiweiTemp: TemplateRef<any>;

    constructor(private dds: DemoDataService) { }

    ngOnInit(): void {

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

        this.columns = [
            { field: 'id', width: 100, title: 'ID'},
            { field: 'name', width: 130, title: '姓名', template: this.nameTemp},
            { field: 'sex', width: 70, title: '性别' , template: this.sexTemp},
            { field: 'birthday', width: 120, title: '出生日期', template: this.birthdayTemp},
            { field: 'maray', width: 70, title: '婚否', template: this.marayTemp},
            { field: 'addr', width: 170, title: '地址' , template: this.addrTemp},
            { field: 'company', width: 100, title: '公司', template: this.companyTemp},
            { field: 'nianxin', width: 70, title: '年薪', template: this.nianxinTemp},
            { field: 'zhiwei', width: 100, title: '职位', template: this.zhiweiTemp }
        ];
        this.items = this.dds.createData(5);
    }

    newAdd() {
        this.items = [...this.items, { id: this.items.length + 1 }];
    }

    removeRow() {
        if (this.dg.selectedRow) {
            const id = this.dg.selectedRow.id;
            this.items = this.items.filter(n => n.id !== id);
        }
    }
    save() {
        alert('F12 看下提交的数据');
        console.log('提交数据', this.items);
    }
}

```