如何将 AG 网格控件的标题中的文本居中？

Posted 2023-03-28

【中文标题】如何将 AG 网格控件的标题中的文本居中？

【英文标题】：How can I center the text in the headers for an AG-grid control?

【发布时间】：2018-03-11 10:31:51

【问题描述】：

如何将 AG-grid 控件的标题中的文本居中？我曾尝试在列定义中使用 cellstyle 和 cellclass 但这不起作用。谢谢

【问题讨论】：

还将 .ag-header-cell 设置为 text-align: center

请参阅 ***.com/questions/57933672/… 以获得有效的答案。

【参考方案1】：

我正在使用 react，我刚刚将以下 sn-p 添加到我的 Table 组件的 .css

.ag-header-cell-label 
   justify-content: center;

我正在覆盖 ag-grid 中的 .css 类类，我通过 devtools 检查发现它使用 flexbox 进行显示。

查看示例（不是反应，而是相同的概念）：https://embed.plnkr.co/O3NI4WgHxkFiJCyacn0r/

【讨论】：

如果我想将所选标题的文本居中怎么办？有什么想法吗？如何从特定列标题中获取类？

漂亮！谢谢。

【参考方案2】：

你可以使用这个属性：

cellStyle: textAlign: 'center'

【讨论】：

这不会影响标题。我试过headerClass 和headerCellClass 到目前为止没有运气..

【参考方案3】：

为单元格分配一个类，如下所示：

gridOptions = 
  ...
  columnDefs: [
    ...
         headerName: "field1", field: "field1", cellClass: "grid-cell-centered"
    ...
  ]

css 文件：

.grid-cell-centered 
  text-align: center;

【讨论】：

我感觉这只会使单元格的内容居中而不是标题

【参考方案4】：

如果您想在 ag-grid 中将文本右对齐、左对齐或居中。然后使用这个：-

cellStyle:  textAlign: 'right' 
cellStyle:  textAlign: 'left'  
cellStyle:  textAlign: 'center' 

【讨论】：

这只是对齐单元格文本而不是标题文本

【参考方案5】：

我已经使用了一段时间的更完整的解决方案是创建一个列定义助手，如下所示：

export const columnCentered = 
  headerClass: 'text-center',
  cellStyle: 
    textAlign: 'center',
    // Add the following if you are using .ag-header-cell-menu-button 
    // and column borders are set to none.
    // marginLeft: '-16px'
  

然后将以下内容添加到您的style.scss

.ag-header-cell.text-center 
  .ag-header-cell-label 
    justify-content: center;
  

你终于可以像这样轻松使用它了：

columnDefs: [
   field: 'normalCol' ,
   field: 'centeredColA' ...columnCentered ,
   field: 'centeredColB' ...columnCentered 
]

【参考方案6】：

要使用自定义类，请将headerClass: "text-center" 添加到列定义和 css 中，如下所示：

text-center * 
    justifyContent: center

【讨论】：

只是一个注释，它的 justify-content: center

【参考方案7】：

我正在使用 Angular 8，而 AG-Grid 嵌套在其他一些组件的深处。

我必须这样做才能让它发挥作用。

.ag-header-group-cell-label 
      justify-content: center !important;

而且，这严格需要在styles.scss 文件下，而不是在组件 scss 文件中。否则，它将不起作用。

希望这对某人有所帮助。

【讨论】：

在组件 scss 文件中：:host ::ng-deep .ag-header-cell-label justify-content: center !important;

::ng-deep 已被弃用，只需设置组件的 ViewEncapsulation.None 即可。

【参考方案8】：

对于每个header的（独立）自定义，可以制作自定义header组件：https://www.ag-grid.com/javascript-grid-header-rendering/

【参考方案9】：

应该是：

.ag-header-cell-label 
  text-align: center;

【参考方案10】：

我正在使用 angular，我只想将分组标题中的文本居中，因此请将此代码用于 style.css

.ag-header-group-cell-label 
  justify-content: center;

【讨论】：

你的答案已被收录here