[英]AG-Grid: Column Grouping based on children set
I have an ag-grid columnDef similar to this structure.我有一个类似于这种结构的 ag-grid columnDef。
gridOptions.columnDefs = [
{
headerName: 'Athlete Details',
children: [
{ headerName: 'Name', field: 'name' },
{ headerName: 'Age', field: 'age' },
{ headerName: 'Country', field: 'country' }
]
},
{
headerName: 'Sports Results',
children: [
{ headerName: 'Sport', field: 'sport' },
{ headerName: 'Total', columnGroupShow: 'closed' },
{ headerName: 'Gold', columnGroupShow: 'open' },
{ headerName: 'Silver', columnGroupShow: 'open' },
{ headerName: 'Bronze', columnGroupShow: 'open' }
]
}
];
With this kind of data set, is it possible to group both sets using the name of the athlete?使用这种数据集,是否可以使用运动员的姓名对两组数据进行分组?
I want to create a group that displays only the name of the Athlete with a count of total number of medals, and the Name item on the grid is expandable/collapsible which looks something like this.我想创建一个仅显示运动员姓名和奖牌总数的组,并且网格上的名称项是可展开/可折叠的,看起来像这样。
When you segregate the columns into column groups, it is just a way of displaying the data but behind the scenes, that data is not disjoint but one chunk of array.当您将列分成列组时,这只是一种显示数据的方式,但在幕后,该数据不是不相交的,而是一个数组块。 So you can group any number of column groups by any one row.
因此,您可以按任意一行对任意数量的列组进行分组。 In this case 'Athlete'.
在这种情况下,“运动员”。
To achieve the result you want, a few tweaks to gridOptions and colDefs are required.要获得您想要的结果,需要对 gridOptions 和 colDefs 进行一些调整。 I will post the relevant code with comments inline.
我将发布相关代码并内联注释。
In template -在模板中 -
[columnDefs]="columnDefs"
[defaultColDef]="defaultColDef"
[autoGroupColumnDef]="autoGroupColumnDef" // to customize your grouped column
[suppressAggFuncInHeader]="true" // to suppress column headers with aggregate function prefix like sum(Gold)
In component -在组件中 -
constructor(private http: HttpClient) {
this.columnDefs = [
{
headerName: 'Athlete Details',
children: [
{
headerName: 'Athlete',
field: 'athlete',
width: 180,
filter: 'agTextColumnFilter',
rowGroup: true, // this to group by athlete
hide: true // hide this column as you will display grouped column
},
{
headerName: 'Age',
field: 'age',
width: 90,
filter: 'agNumberColumnFilter',
},
{
headerName: 'Country',
field: 'country',
width: 140,
},
],
},
{
headerName: 'Sports Results',
children: [
{
headerName: 'Sport',
field: 'sport',
width: 140,
},
{
headerName: 'Gold',
field: 'gold',
width: 100,
filter: 'agNumberColumnFilter',
aggFunc: 'sum' // to show subtotals at group level for this column
},
{
headerName: 'Silver',
field: 'silver',
width: 100,
filter: 'agNumberColumnFilter',
aggFunc: 'sum'
},
{
headerName: 'Bronze',
field: 'bronze',
width: 100,
filter: 'agNumberColumnFilter',
aggFunc: 'sum'
},
{
headerName: 'Total',
field: 'total',
width: 100,
filter: 'agNumberColumnFilter',
aggFunc: 'sum'
},
],
},
];
this.defaultColDef = {
flex: 1,
minWidth: 100,
filter: true,
sortable: true,
resizable: true,
};
this.autoGroupColumnDef = {
headerName: 'Athlete', // naming your grouped column
minWidth: 200,}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.