# Datagrid 行分组
Datagrid 属性设置
- `groupRows`  启用分组行  类型： `boolean`    默认为 `false `

- `groupField` 分组字段   类型 `string`   

  > 字段名称，多个字段分组时，以英文逗分隔

- `groupFooter` 启用分组合计行 **类型**：`boolean` 默认为 `false`

- `groupRowFormatter` 分组行格式化函数 类型： `(row: DatagridGroupRow)=>string`  默认为 null

- `groupStyler` 分组行样式   类型： `(row: DatagridGroupRow)=>{ cls: string, style: { [key:string]: string }}` 默认为 null


**模板HTML**

```html
                 
<farris-datagrid [columns]="columns" [data]="items"  
                 
[groupRows]="true" 
[groupField]="'name,sex'" 
[groupFooter]="true" 
[groupFormatter]="groupRowFormatter"
[groupStyler]="groupRowStyler">
    
</farris-datagrid>
```

**component.ts**

```javascript
// 列设置

this.columns = [
    { field: 'id', width: 100, title: 'ID',
     groupFooter: {
         formatter: this.formatterGroupFooterRow,
         options: { text: '合计' }
     }
    },
    { field: 'name', width: 130, title: '姓名',
     groupFooter: {
         options: {
             calculationType: CalculationType.count
         }
     }
    },
    { field: 'sex', width: 70, title: '性别' },
    { field: 'birthday', width: 120, title: '出生日期'},
    { field: 'maray', width: 70, title: '婚否'},
    { field: 'addr', width: 170, title: '地址' },
    { field: 'company', width: 100, title: '公司',
     groupFooter: {
         formatter: this.formatterGroupFooterRow,
         options: { text: '最大值' }
     }
    },
    { field: 'nianxin', width: 70, title: '年薪',
     groupFooter: {
         formatter: {
             type: 'number',
             options: {
                 prefix: '￥',
                 suffix: ' 元',
                 decimal: '.',
                 precision: 2,
                 thousand: ','
             }
         },
         options: { calculationType: CalculationType.max }
     }
    },
    { field: 'zhiwei', width: 100, title: '职位' }
];



/**
* 自定义分组行格式
*/
groupRowFormatter = (row) => {
    if (row.field === 'name') {
        const h = `<b style="color:red">姓名： ${row.value} [${row.total}]</b>`;
        return h;
    } else if (row.field === 'sex') {
        return `<b style="color:blue">性别：${row.value} [${row.total}]</b>`;
    } else {
        return `<b style="color:#886ab5">婚否：${row.value} [${row.total}]</b>`;
    }
}

/** 自定义分组行样式 */
groupRowStyler = (row) => {
    if (row.field === 'name') {
        return {
            style: {
                background: '#EFF5E5',
                color: '#5A8129'
            }
        };
    } else if (row.field === 'sex') {
        return {
            style:  {
                background: '#FFEAC1',
                color: '#E99100'
            }
        };
    }
}
```