如何在AG网格控件的标题中居中放置文本？

Question

如何在AG网格控件的标题中居中放置文本？我曾尝试在列定义中使用cellstyle和cellclass，但这没有用。谢谢

Answer 1

您可以使用此属性：

cellStyle: {textAlign: 'center'}

Answer 2

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

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

最后你可以像这样轻松使用它：

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

Answer 3

我正在使用react，我只是将以下代码段添加到了Table组件的 .css

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

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

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

Answer 4

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

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

Answer 5

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

text-center * {
    justifyContent: center
}

Answer 6

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

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

css文件：

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