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

Question

如何将文本置于AG网格控件的标题中心？我已尝试在列定义中使用cellstyle和cellclass，但这不起作用。谢谢

Answer 1

如果要在ag-grid中向右，向左或居中对齐文本。然后使用：-

cellStyle: { textAlign: 'right' }
cellStyle: { textAlign: 'left' } 
cellStyle: { textAlign: 'center' }

Answer 2

我正在使用react，我刚刚将以下代码段添加到我的表组件的.css

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

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

参见示例（没有反应，但概念相同）：https://embed.plnkr.co/O3NI4WgHxkFiJCyacn0r/

Answer 3

您可以使用此属性：

cellStyle: {textAlign: 'center'}

Answer 4

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

我必须这样做才能使其正常工作。

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

并且，严格来说，该文件必须位于styles.scss文件下，而不应位于组件scss文件中。否则，它将无法正常工作。

希望这对某人有帮助。

Answer 5

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

text-center * {
    justifyContent: center
}

Answer 6

对于每个标头的（独立）自定义，您可以创建一个自定义标头组件：https://www.ag-grid.com/javascript-grid-header-rendering/

Answer 7

应为：

onClick={test}

Answer 8

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

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

css文件：

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

Answer 9

我已经使用了一段时间的更完整的解决方案是创建一个像这样的列定义助手：

export const columnCentered = {
  headerClass: 'text-center',
  cellStyle: {
    textAlign: 'center'
  }
}

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

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

最后，您可以轻松地像这样使用它：

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

Answer 10

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

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