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);
}

根據此處的示例