Ag-Grid：修改单个列标题的CSS /样式？

Question

我有两个不同的列，希望它们显示为1个单列。 为了给出这种错觉，我使用cellStyle为左列的单元格设置了'border-right'：'none'，但是，对于标题，我发现这并不容易。

我尝试使用headerComponentParams并添加自定义模板，但是要删除右侧边框，需要太多HTML。

我尝试将CS​​S应用于直接使用的组件，但是发现属性不是很描述性，最终我编辑了所有标题。

仅列的功能就可以很好地发挥作用，其中之一就是人字形，需要扩展和折叠其他行。 我可能需要根据需要隐藏此人字形。 对我能做什么有任何想法吗？

Answer 1

没有子标题的列分组对您可能有用。

在您的列定义中，按通常的方式定义2个子列-

this.columnDefs = [
  {
    headerName: "Athlete Country",
    children: [
      {
        headerName: "Athlete",
        field: "athlete",
        width: 150,
      },
      {
        headerName: "Country",
        field: "country",
        width: 120
      }
    ]
  }]

并在您的onGridReady

  onGridReady(params) {
    this.gridApi = params.api;
    this.gridColumnApi = params.columnApi;
    this.gridApi.setHeaderHeight(0);
    this.gridApi.setGroupHeaderHeight(30);
}

根据此处的示例