Ag grid Icon headers

user_6170621 0
Viewed 11345

I'm trying to add an icon column for one of the column using Ag grid. Unfortunately, I did not get a clue to add icon for the column header directly into grid Options.

Expected result is

enter image description here

Actual result is

enter image description here Header icon is not coming

Component TS

 this.gridOptions.api.setColumnDefs([
        {
        headerName: "",
        field: "markedAsFavorite",
        minWidth: 50,
        maxWidth: 50,
        headerComponentParams: { menuIcon: "fa-star" },
        cellRendererFramework: AgGridCustomCellComponent,
        cellRendererParams: {
          ngTemplate: this.markAsFavourite
        }
          }
        ]);

Expert advise please?

ag-grid angular
3 Answers

Use the headerComponentParams as described here: https://www.ag-grid.com/javascript-grid-column-properties/

this.gridOptions.api.setColumnDefs([         
   {
    headerName: "",
    field: "markedAsFavorite",
    minWidth: 50,
    maxWidth: 50,
    headerComponentParams: { template: '<i class="fa fa-star"></i>' },
    cellRendererFramework: AgGridCustomCellComponent,
    cellRendererParams: {
      ngTemplate: this.markAsFavourite
    }
  }
]);
user_4591020

To show the icon, you need to give components property components: { agColumnHeader: CustomHeader } to the grid instance and create custom header function. Follow the link ag-grid-header-component.

user_71476520

first refer to this

in your cell 

 {
    headerName: "",
    field: "icon",
    width: 100,
    cellRenderer: function(params) {
        return '<span><i class="fa fa-trash"></i></span>';
    }
}
user_61831130
Related