Menu
How can I center the text in the headers for an AG-grid control? I have tried using cellstyle and cellclass in the column definition but that did not work. Thank you
416
In version 28 of AG Grid we added support for wrapping header cell text. This is done with the Wrap Header Text and Auto Header Height properties. Adding wrapHeaderText: true will cause long headers to wrap, but if some are longer than the actual height of the header then they will be shown truncated.
You need to use the tooltipValueGetter property and set this in defaultColDef to params. value . defaultColDef = { tooltipValueGetter: (params) => { return params. value; } };
In your data rows: you have to enter in the first column the title you want for each row. Show activity on this post. Add this as your first colDef . It will render a index column that is unmovable.
The grid header displays the view's header. The table below lists the main properties affecting element behavior and appearance. Characteristics. Members. Value.
I'm using react and I just added the following snippet to my Table component's .css
.ag-header-cell-label { justify-content: center; } I'm overriding the .css class class from ag-grid which I found via devtools inspection, and discovered it's using flexbox for display.
See example (not react but same concept): https://embed.plnkr.co/O3NI4WgHxkFiJCyacn0r/
90
You may use this property:
cellStyle: {textAlign: 'center'} If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With