[英]Ag-Grid: Modify a single column header's css/style?
I have two different columns and would like them to appear as 1 single column. 我有两个不同的列,希望它们显示为1个单列。 To give that illusion I used the cellStyle to set 'border-right':'none' for the cells on the left column, however, for the header I'm finding out it is not as easy. 为了给出这种错觉,我使用cellStyle为左列的单元格设置了'border-right':'none',但是,对于标题,我发现这并不容易。
I've tried using headerComponentParams and adding a custom template, but there is way too much HTML that is needed in order to remove the right border. 我尝试使用headerComponentParams并添加自定义模板,但是要删除右侧边框,需要太多HTML。
I have tried applying CSS to the component I am working in directly, but I am finding that the attributes are not very descriptive, and I end up editing all of the headers. 我尝试将CSS应用于直接使用的组件,但是发现属性不是很描述性,最终我编辑了所有标题。
The functionality of columns alone work very well, one being a chevron which needs to expand and collapse additional rows. 仅列的功能就可以很好地发挥作用,其中之一就是人字形,需要扩展和折叠其他行。 I may need to hide this chevron as needed. 我可能需要根据需要隐藏此人字形。 Any idea on what I could do? 对我能做什么有任何想法吗?
Column Grouping without the child headers is what can be useful for you. 没有子标题的列分组对您可能有用。
In your column defs, define the 2 child columns as you would normally like this - 在您的列定义中,按通常的方式定义2个子列-
this.columnDefs = [
{
headerName: "Athlete Country",
children: [
{
headerName: "Athlete",
field: "athlete",
width: 150,
},
{
headerName: "Country",
field: "country",
width: 120
}
]
}]
And in your onGridReady
并在您的onGridReady
onGridReady(params) {
this.gridApi = params.api;
this.gridColumnApi = params.columnApi;
this.gridApi.setHeaderHeight(0);
this.gridApi.setGroupHeaderHeight(30);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.