[英]How can I center the text in the headers for an AG-grid control?
How can I center the text in the headers for an AG-grid control?如何将 AG 网格控件的标题中的文本居中? I have tried using cellstyle and cellclass in the column definition but that did not work.
我曾尝试在列定义中使用 cellstyle 和 cellclass,但这没有用。 Thank you
谢谢
I'm using react and I just added the following snippet to my Table component's .css
我正在使用 react,我只是将以下代码段添加到我的 Table 组件的
.css
.ag-header-cell-label {
justify-content: center;
}
I'm overriding the .css
class class from ag-grid
which I found via devtools inspection, and discovered it's using flexbox for display.我覆盖了
ag-grid
的.css
类类,我通过 devtools 检查找到了它,并发现它使用 flexbox 进行显示。
See example (not react but same concept): https://embed.plnkr.co/O3NI4WgHxkFiJCyacn0r/参见示例(不是反应而是相同的概念): https : //embed.plnkr.co/O3NI4WgHxkFiJCyacn0r/
您可以使用此属性:
cellStyle: {textAlign: 'center'}
If you want to align your text right, left or center in ag-grid.如果您想在 ag-grid 中将文本向右、向左或居中对齐。 Then use this:-
然后使用这个:-
cellStyle: { textAlign: 'right' }
cellStyle: { textAlign: 'left' }
cellStyle: { textAlign: 'center' }
Assign a class to the cell as below:为单元格分配一个类,如下所示:
gridOptions = {
...
columnDefs: [
...
{ headerName: "field1", field: "field1", cellClass: "grid-cell-centered"}
...
]
}
css file: css文件:
.grid-cell-centered {
text-align: center;
}
I'm using Angular 8 and AG-Grid is nested deep in some other component.我正在使用 Angular 8,而 AG-Grid 嵌套在其他一些组件的深处。
I had to do this in order to make it work.我必须这样做才能使它工作。
.ag-header-group-cell-label {
justify-content: center !important;
}
And, this strictly needs to be under styles.scss
file and not in the component scss file.而且,这严格需要在
styles.scss
文件下,而不是在组件scss 文件中。 Or else, it will not work.否则,它将无法正常工作。
Hope this helps someone.希望这可以帮助某人。
To use a custom class, add headerClass: "text-center"
to the column definition and css as follows:要使用自定义类,请将
headerClass: "text-center"
到列定义和 css 中,如下所示:
text-center * {
justifyContent: center
}
A more complete solution I've been using for a while now, is to create a column definition helper like this:我已经使用了一段时间的更完整的解决方案是创建一个像这样的列定义助手:
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'
}
}
then add the following to your style.scss
然后将以下内容添加到你的
style.scss
.ag-header-cell.text-center {
.ag-header-cell-label {
justify-content: center;
}
}
finally you can easily use it like this:最后,您可以像这样轻松使用它:
columnDefs: [
{ field: 'normalCol' },
{ field: 'centeredColA' ...columnCentered },
{ field: 'centeredColB' ...columnCentered }
]
对于每个标题的(独立)自定义,您可以制作自定义标题组件: https : //www.ag-grid.com/javascript-grid-header-rendering/
you can do this by overriding the css like:-你可以通过重写 css 来做到这一点:-
::ng-deep .ag-header-group-cell-label {
justify-content: center !important;
}
::ng-deep .ag-header-cell-label {
justify-content: center !important;
}
Thanks谢谢
My CSS:我的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;
}
And use inside columnDefs:并在 columnDefs 中使用:
{
headerName: 'header_name',
field: 'header_field',
headerClass: "ag-center-header",
cellClass: "ag-center-cell"
}
It should be:应该是:
.ag-header-cell-label {
text-align: center;
}
I'm using angular and I just want to center text in the grouped header so use this code to style.css我正在使用 angular,我只想在分组标题中居中文本,因此将此代码用于 style.css
.ag-header-group-cell-label {
justify-content: center;
}
columndef has a property. columndef 有一个属性。 headerClass: '', you can add css to header
headerClass: '', 你可以在header中添加css
:host ::ng-deep .my-center-header-class .ag-header-cell-text {
width: 100%;
text-align: center;
}
Set headerClass as 'my-center-header-class' in colDef在 colDef 中将 headerClass 设置为 'my-center-header-class'
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.