如何在ag-grid中自动换行标题

Question

使用ag-grid,有没有办法将长标题分成2行...

columnDefs headerName中的一个中断'Long<br />Header' 让我在那里分开(使用开发工具我可以看到文本有br),但是其中一个周围元素的高度为25px; <div class="ag-header" style="height: 25px;">我认为导致标题的第二行不显示.

我想知道使用组头作为临时文本来分割文本,但是长期(当我需要分组时)这不是一个选项...

Answer 1

尝试将以下内容添加到CSS中:

.ag-header-cell-label {
    text-overflow: clip;
    overflow: visible;
    white-space: normal;
}

并将其添加到您的网格选项:

headerHeight: 48

Answer 2

使用 ag-grid@15.0.0，只有以下解决方案有效：

.ag-header-cell-label .ag-header-cell-text {
  white-space: normal !important;
}

这是我在使用 css 时第一次真正需要使用!important.

Answer 3

对我来说，使用的组合angular@5.5.1和ag-grid@13.3.1，下面的工作：

::ng-deep .ag-header-cell-text {            
    text-overflow: clip !important;
    overflow: visible !important;
    white-space: normal !important;
}

::ng-deep是一个 Angular CSS 组合器（指令）。这是基于 Stian 的回答，不同之处在于，在我的情况下.ag-header-cell-label，它仅适用于.ag-header-cell-text.

在网格选项对象中，您必须设置标题高度：

this.testGridOptions = <GridOptions>{
            onGridReady: () => {
                this.testGridOptions.api.setHeaderHeight(75);
                this.testGridOptions.api.sizeColumnsToFit();
            }
        };

Answer 4

将其放入网格选项中

标题高度：50

在 style.css 中

.ag-header-cell-label .ag-header-cell-text {
    white-space: normal !important;
 }

Answer 5

对我来说，上述解决方案都没有奏效。对我有用的是将 headerHeight （在 GridOptions 中）设置为您指定的高度，然后添加以下内容：

.ag-header-cell-text {
   overflow: visible;
   text-overflow: unset;
   white-space: normal;
}

就我而言，我不需要向.ag-header-cell包装类添加任何内容。

我正在使用以下版本：

"ag-grid-angular": "18.1.0",
"ag-grid-enterprise": "18.1.1",