Centering data with headers that have filter icons

[Steve Hanson]

While the page is loading, the columns are set with defined width within the vue file, these appear to be correct. See image below for loading screen. The two examples (2nd & 3rd col) below are center aligned using:

type: 'string', width: 120, headerTextAlign: "Center", textAlign: "Center" },

However, once the page is finally loaded, the columns collapse down and push the filter icons right next to the header text. I have used the .eheadercelldiv styling used in other forum posts about centering... which does center the header & column text, but now creates the cramped text/icon issue seen below. 

Any help is appreciated.

[Hemanthkumar S]

Hi Steve Hanson,

Before we start providing a solution to your query, we need some information for our clarification. So, please share the below details which will be helpful for us to provide a better solution.

1. Are you using the column AutoFit feature in the grid?
2. Share your complete Grid rendering code.
3. Share the Syncfusion package version.
4. Share the video demo, Which help us to better understand your query.

Regards,

Hemanth Kumar S