如何将 AG-grid 控件头部文本居中显示？

Question

我该如何让 AG-grid 控件中的标题文本居中显示？我尝试在列定义中使用 cellstyle 和 cellclass，但没有起作用。谢谢。

- user7400346

---

同时，.ag-header-cell 的 text-align 属性被设置为 center。 - user7400346

请参考 https://dev59.com/hbbna4cB1Zd3GeqPY1C2 中的答案。 - DancingDad

Answer 1

我正在使用React，并且刚刚将以下片段添加到我的表格组件的.css中。

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

我正在覆盖通过开发者工具检查发现的ag-grid中使用flexbox显示的.css类类。

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

- Alex Wachira

---

如果我想将所选标题的文本居中，该怎么办？有什么想法吗？如何从特定列标题获取类？ - Bernardo Marques

太棒了！谢谢。 - Kode Charlie

您可以通过设置列定义的headerClass来为特定的表头列设置样式。如果需要覆盖已经在表头上通过现有的ag-grid类定义的属性，您可能还需要在样式类定义中使用!important。 - undefined

Answer 2

您可以使用此属性：

cellStyle: {textAlign: 'center'}

- Maharramoff

---

这不会影响标题。我尝试过使用 headerClass 和 headerCellClass，但都没有成功。 - Sonic Soul

这是针对单元格而非表头的。 - Light Yagami

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

- Stefanos Chrs

Answer 4

为使用自定义类别，请将 headerClass: "text-center" 添加到列定义中，并按以下方式添加 CSS：

text-center * {
    justifyContent: center
}

- James

---

只是一个提示，它的 justify-content 属性值为 center。 - MHOOS

Answer 5

给单元格分配一个类，如下所示:

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

CSS文件：

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

- ZooZ

---

我感觉这只会将单元格内容居中，而不是标题。 - LucasSeveryn

Answer 6

如果你想在 ag-grid 中将文本靠右、靠左或居中对齐，请使用以下内容：

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

- akash mishra

---

仅仅使单元格文本对齐，而不是表头文本。 - GavinBelson

Answer 7

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

- O Thạnh Ldt

Answer 8

如果您想要对每个标题进行（独立）自定义，您可以创建一个自定义标题组件：https://www.ag-grid.com/javascript-grid-header-rendering/

“Original Answer”翻译成中文是“最初的回答”。

- Alex P.

Answer 9

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

为了使其正常工作，我必须这样做。

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

同时，这严格需要在 styles.scss 文件中编写，而不是组件的scss文件。否则，它将无法工作。

希望这能帮助到某些人。

- Pramesh Bajracharya

---

在组件的scss文件中：:host ::ng-deep .ag-header-cell-label { justify-content: center !important; } - Slava

::ng-deep正在被弃用，只需设置组件的ViewEncapsulation.None，您的样式就可以正常工作。 - tsvedas

Answer 10

您可以通过覆盖CSS来实现此操作，例如：-

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

谢谢

- Akash