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

Question

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

score 33 · Accepted Answer

我正在使用反应，我刚刚将以下片段添加到我的表组件的.css

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

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

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

score 14 · Accepted Answer

14

您可以使用此属性：

cellStyle: {textAlign: 'center'}

于 2018-12-25T18:59:53.543 回答

score 6 · Accepted Answer

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

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

css 文件：

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

score 5 · Accepted Answer

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

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

score 4 · Accepted Answer

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

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 }
]

score 3 · Accepted Answer

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

text-center * {
    justifyContent: center
}

score 2 · Accepted Answer

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

我必须这样做才能使它工作。

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

而且，这严格需要在styles.scss文件下，而不是在组件 scss 文件中。否则，它将无法正常工作。

希望这可以帮助某人。

score 1 · Accepted Answer

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

score 1 · Accepted Answer

1

它应该是：

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

于 2019-10-14T12:36:05.333 回答

score 0 · Accepted Answer

我正在使用角度，我只想在分组标题中居中文本所以使用这个代码来 style.css

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

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

10 回答 10

Related

Reference