如何在 Ag-Grid 中僅指定一個 header 的樣式？

Question

我想在我的網格上僅指定一列的 Header 樣式。 我知道如何為特定網格的所有列配置 Header 樣式。 為此，有必要在“styles:scss”文件中添加以下內容：

例子：

#IdOfGrid .ag-header-cell-label {
justify-content: left;} 

如何僅將這種樣式應用於一列 header？

謝謝！

Answer 1

根據https://www.ag-grid.com/javascript-grid-column-properties/

您可以將 headerClass 屬性添加到列屬性中，並為該 class 添加 css 它僅適用於該列 header

Answer 2

在 columnDefs 內的headerClass屬性中有一個 CSS class ，如下所示：

columnDefs = [
{
  headerName: "Table Name",
  headerClass: "table-header",
  field: "tableName"
},
 .
 .
 .
]

在 css 中，如果您的 ag-grid-angular 組件包含在不同的元素中，請使用::ng-deep以及另一個組件/類名稱。 就我而言，我得到了這樣的風格：

::ng-deep .main-wrapper app-custom-grid ag-grid-angular .table-header {
  background-color: blue;
}

Answer 3

要設置列基本樣式，只需給出：

headerName: 'Title Here',
field:'title',
styleCss: { background: '#eee'; 'font-size': '15px' }

如果要在某些條件下賦予樣式，則需要一個外部函數，並在列定義中調用它，如下所示：

constructor(){
  this.gridOptions = {

    getRowStyle: (params: any) => {
      if (params.data){
        if(params.data.flag) {
          return { background: '#eee', 'font-weight': 750 };
        }
      }
    }
  }// end of gridoptions
}// end of constructor

有關更多詳細信息，請深入了解我的另一個答案： https://stackoverflow.com/a/61236065/7118138