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...

cellStyle is only applied to cells not to headers. What do you mean by "dynamically", do need to change it during runtime? — Arikael
– Arikael, Commented Apr 1, 2019 at 6:15

wentjun · Accepted Answer · 2019-04-01 06:46:56Z

2

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>

answered Apr 1, 2019 at 6:46

wentjun

42.9k10 gold badges108 silver badges116 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Vikas Nale Over a year ago

It worked like a charm .. thanks a lot. I have extended your solution to work for group header as well. Here is it : stackblitz.com/edit/…

Collectives™ on Stack Overflow

How to align ag-grid-angular header dynamically

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related