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

Question

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

Answer 1

我正在使用 React，我刚刚将以下代码片段添加到我的 Table 组件中

.css

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

我正在重写

.css

中的

ag-grid

类，这是我通过 devtools 检查发现的，并发现它使用 Flexbox 进行显示。

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

Answer 2

您可以使用此属性：

cellStyle: {textAlign: 'center'}

Answer 3

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

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

Answer 4

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

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

css文件：

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

Answer 5

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

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

Answer 6

要使用自定义类，请将

headerClass: "text-center"

添加到列定义和 css 中，如下所示：

text-center * {
    justifyContent: center
}

Answer 7

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

Answer 8

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

我必须这样做才能使其发挥作用。

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

并且，这严格需要位于

styles.scss

文件下，而不是在组件 scss 文件中。不然不行。

希望这对某人有帮助。

Answer 9

我的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"
            }

Answer 10

应该是：

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

Answer 11

您可以通过覆盖 css 来做到这一点，例如：-

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

谢谢

Answer 12

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

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

Answer 13

columndef 有一个属性。 headerClass: '', 可以在header中添加css

Answer 14

:host ::ng-deep .my-center-header-class .ag-header-cell-text {
    width: 100%;
    text-align: center;
}

在 colDef 中将 headerClass 设置为 'my-center-header-class'