How to align ag-grid-angular header dynamically

Question

I have an ag-grid in angular 6 and have columns and data dynamically attached to it. Now i want to align header for (both parent and children in case of multi header) dynamically. Like first column header should be left aligned and others will be center aligned.

I tried to set cellStyle and some other options i found, but none of them worked

I tried to implement it like :

  let headerItem = {
    headerName: name,
    children: [
      {
        headerName: name,
        field: 'col' + i + '.value',
        hide: isHidden,
        pinned: pinned,
        cellStyle: function (params) {
          try {
            return {text-align : 'center'};
          } catch (e) {
            return null;
          }
        }
      }
    ],
    cellStyle: function (params) {
          try {
            return {text-align : 'center'};
          } catch (e) {
            return null;
          }
        }
  }

Please guide how can i get this working...

Answer 1

Assuming you are using the latest (if not one of the latest) versions of Ag-Grid, we have to create custom cell header components if we want to make any customisations to the header cells.

I have used on of the existing Ag-grid's sample, and created a demo for you. (refer to app/custom-header.component.ts for the custom header template)

What I have done is that I have created a separate component for it, and set the template for the header as the following to align it vertically and horizontally (I am using CSS flexbox properties for that)

<div style="display:flex;justify-content:center;align-items:center;">
  {{params.displayName}}
</div>