web-dev-qa-db-ja.com

AGグリッドコントロールのヘッダーのテキストを中央揃えするにはどうすればよいですか？

AGグリッドコントロールのヘッダーのテキストを中央揃えするにはどうすればよいですか？列定義でcellstyleとcellclassを使用してみましたが、うまくいきませんでした。ありがとうございました

javascriptcssreactjsag-gridag-grid-react
10
user7400346

反応を使用していて、次のスニペットをテーブルコンポーネントの.cssに追加しました

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

私はdevtools検査を介して見つけた.cssからag-gridクラスクラスをオーバーライドしており、表示にflexbox=を使用していることを発見しました。

例を参照してください（反応しないが同じ概念）： https://embed.plnkr.co/O3NI4WgHxkFiJCyacn0r/

12
Alex Wachira

このプロパティを使用できます：

cellStyle: {textAlign: 'center'}
7
Maharramoff

Ag-gridでテキストを右、左、または中央に揃えたい場合。次に、これを使用します-

cellStyle: { textAlign: 'right' }
cellStyle: { textAlign: 'left' } 
cellStyle: { textAlign: 'center' }
1
akash mishra

以下のようにクラスをセルに割り当てます。

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

cssファイル：

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

そのはず：

.ag-header-cell-label {
  text-align: center;
}
0
PHAM Cong Cuong

各ヘッダーの（独立した）カスタマイズについては、カスタムヘッダーコンポーネントを作成できます。 https://www.ag-grid.com/javascript-grid-header-rendering/

0
Alex Pandrea