27

ag-grid を使用して、長いヘッダーを 2 行に分割する方法はありますか...

columnDefs headerName: の中断により、'Long<br />Header' そこに途中まで到達します (開発ツールを使用すると、テキストに br があることがわかります) が、周囲の要素の 1 つの高さが 25px です。<div class="ag-header" style="height: 25px;">これにより、ヘッダーの 2 行目が表示されなくなると思います。

グループヘッダーを一時的に使用してテキストを分割することについて疑問に思いましたが、長期的には (グループ化する必要がある場合)、それはオプションではありません...

4

7 に答える 7

4

ヘッダーの特定の位置に改行が必要な場合は、 を使用white-space: preしてこれを実現できます。これを CSS に追加します (別のテーマを使用している場合はテーマを変更します)。

.ag-theme-material .ag-header-cell-label .ag-header-cell-text {
  white-space: pre;
}

そして、それに\n応じてヘッダー名に文字を追加します。gridApi.setHeaderHeight()また、 と を使用して十分な高さがあることを確認する必要があります。gridApi.setGroupHeaderHeight()

于 2019-10-16T10:07:42.447 に答える
0

次のCSSを試すことができます：

.ag-header-group-text,
.marginright-xs {
  white-space: pre-wrap;
}
于 2021-07-22T16:14:01.467 に答える