[英]How can I center the text in the headers for an AG-grid control?
如何将 AG 网格控件的标题中的文本居中? 我曾尝试在列定义中使用 cellstyle 和 cellclass,但这没有用。 谢谢
我正在使用 react,我只是将以下代码段添加到我的 Table 组件的.css
.ag-header-cell-label {
justify-content: center;
}
我覆盖了ag-grid
的.css
类类,我通过 devtools 检查找到了它,并发现它使用 flexbox 进行显示。
参见示例(不是反应而是相同的概念): https : //embed.plnkr.co/O3NI4WgHxkFiJCyacn0r/
您可以使用此属性:
cellStyle: {textAlign: 'center'}
如果您想在 ag-grid 中将文本向右、向左或居中对齐。 然后使用这个:-
cellStyle: { textAlign: 'right' }
cellStyle: { textAlign: 'left' }
cellStyle: { textAlign: 'center' }
为单元格分配一个类,如下所示:
gridOptions = {
...
columnDefs: [
...
{ headerName: "field1", field: "field1", cellClass: "grid-cell-centered"}
...
]
}
css文件:
.grid-cell-centered {
text-align: center;
}
我正在使用 Angular 8,而 AG-Grid 嵌套在其他一些组件的深处。
我必须这样做才能使它工作。
.ag-header-group-cell-label {
justify-content: center !important;
}
而且,这严格需要在styles.scss
文件下,而不是在组件scss 文件中。 否则,它将无法正常工作。
希望这可以帮助某人。
要使用自定义类,请将headerClass: "text-center"
到列定义和 css 中,如下所示:
text-center * {
justifyContent: center
}
我已经使用了一段时间的更完整的解决方案是创建一个像这样的列定义助手:
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 }
]
对于每个标题的(独立)自定义,您可以制作自定义标题组件: https : //www.ag-grid.com/javascript-grid-header-rendering/
你可以通过重写 css 来做到这一点:-
::ng-deep .ag-header-group-cell-label {
justify-content: center !important;
}
::ng-deep .ag-header-cell-label {
justify-content: center !important;
}
谢谢
我的CSS:
/*HEADER STYLE*/
.ag-theme-alpine .ag-header-cell {
padding-left: 10px;
padding-right: 10px;
}
.ag-right-header .ag-header-cell-label {
flex-direction: row-reverse;
}
.ag-center-header .ag-header-cell-label {
justify-content: center;
}
.ag-left-header .ag-header-cell-label {
flex-direction: row;
}
.ag-center-cell {
text-align: center;
}
.ag-right-cell {
text-align: right;
}
.ag-left-cell {
text-align: left;
}
并在 columnDefs 中使用:
{
headerName: 'header_name',
field: 'header_field',
headerClass: "ag-center-header",
cellClass: "ag-center-cell"
}
应该是:
.ag-header-cell-label {
text-align: center;
}
我正在使用 angular,我只想在分组标题中居中文本,因此将此代码用于 style.css
.ag-header-group-cell-label {
justify-content: center;
}
columndef 有一个属性。 headerClass: '', 你可以在header中添加css
:host ::ng-deep .my-center-header-class .ag-header-cell-text {
width: 100%;
text-align: center;
}
在 colDef 中将 headerClass 设置为 'my-center-header-class'
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.