HTML in column title.

[yangwen2]

I have a use case where the column header needs to have iconography. Is it possible to have HTML content as column title?

[Anandamohinidasi]

+1 I also have the very same issue

[yangwen2]

I'm hacking it right now. Assigned each column a unique css class. Then injecting dom elements into the ng2-smart-table-title element in my component's AfterViewInit function.

[cgebe]

bump.

[PK1NONLY]

@yangwen2 did you get the solution? if yes plz share

[yangwen2]

Yes like I said in the June 20 comment above. I have a hack work around. In the column config object I have something like below to assign a css class to the column header. Then that allows me to target this element in the future and set the innerHTML property of it.

meterNumber: { title: 'Meter #', class: 'meter-number-column', sortDirection: 'asc', filter: false },

[samir-kamble]

Is there any other way than this??

[korifeich]

Here is the way I add icon non interactive to header using pure css:

.slash-outlined {
  .ng2-smart-title {
    display: inline-block;
    white-space: nowrap;

    &::before {
      display: inline-block;
      width: 20px;
      vertical-align: middle;
      margin-right: 5px;
      content: url(/assets/images/slash-outline.svg);
    }
  }
}

There result