The autogenerate property could be used to auto generate the grid's IgxColumnComponent based on the data source fields.

Alternatively, the columns could be iterated through a predefined columns collection. Customizing different properties for any column could be performed with the help of the grid’s columnInit event. Here is a small sample demonstrating this. As you can see, for the “UserName” field, the header and its width are altered in the columnInit handler. Additionally, the “columns” collection specifies which columns are editable, which is bound to the [editable] input of the igx-column in the template:

       <igx-grid
        #grid1
        [data]="localData"
        [allowFiltering]="true"
        [primaryKey]="'UserName'"
        (columnInit)="initColumns($event)"
      >
        <igx-column
          *ngFor="let c of columns"
          [field]="c.field"
          [sortable]="true"
          [resizable]="true"
          [editable]="c.editable"
        >
        </igx-column>
      </igx-grid>

  ngOnInit() {
    this.columns = [
      { field: 'Salutation', editable: true },
      { field: 'UserName', editable: false },
      { field: 'Department', editable: true },
      { field: 'Designation', editable: true },
      { field: 'UserType', editable: true },
    ];
  }

  public initColumns(currentColumn) {
    if (currentColumn.field === 'UserName') {
      currentColumn.header = 'User Name';
      currentColumn.width = '200px';
    }
  }

In conclusion, I hope this suggestion helps. Additionally, I would recommend posting new forum threads for your questions, as your query does not seem particularly related to the current thread’s original topic, which is collapsible column groups. This will ensure that all your questions are properly addressed.

Best regards,
Bozhidara Pachilova

Hi Bozhidara Pachilova,

How to create dynamic igx-column-headers with igx-columns?

Please suggest me.

Regards,

R.Madhavan

Hello Philippe,

Thank you for posting to Infragistics Community!

I have been looking into your question and determined that detecting when a column group is expanded/collapsed could easily be detected by templating the igxCollapsibleIndicator for each column group and handling the click event of the icon, or whatever the templated element is. If you would like to keep the default look, the template can contain the “original” IgxIcons ‘expand_more’/’chevron_right’ as demonstrated in this sample I created.

As you will see there, you can also pass the “column” parameter to the handler, with which you can execute your specific resizing logic depending on the currently expanded/collapsed column group. Additionally, please note, that as the click handler is fired before the group is actually expanded/collapsed, the opposite value of columnGroup.expanded has to be used (!columnGroup.expanded).

Please, check out this suggestion on your side and let me know if it helps.

Best regards,
Bozhidara Pachilova
Associate Software Developer