NGX-Datatable with Angular 2 - Wrap Column's Name

Question

I have a ngx-datatable with Angular 2 that has some very long column names. I would like to duplicate what they do with Auto Height for row ( Link to Documentation ) but would settle for just getting the really long names to wrap into multiple lines.

Normally this wouldn't be an issue but with my newness to Angular I'm stuck. Normal things like overflow-wrap or word-wrap don't seem to work. Any help and or advice would be appreciated. Thanks!

My current code:

  <div class="full-width">
    <ngx-datatable
      class='material'
      [rows]='rows'
      [columns]="columns"
      [columnMode]="'standard'"
      [headerHeight]="150"
      [footerHeight]="50"
      [scrollbarH]="true"
      [rowHeight]="'auto'"
      >
    </ngx-datatable>
  </div>

Answer 1

Adding this to the CSS did the trick. It also centered and vertically aligned the column headers.

.ngx-datatable.fixed-header .datatable-header .datatable-header-inner .datatable-header-cell {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: normal !important;
  text-align: center !important;
  vertical-align: middle !important;
}

Answer 2

Also, you can try the following code at the ng-template or ngx-datatable-column tag:

[headerClass]="'uk-text-center'" cellClass="uk-text-center"

I used the UI KIT lib, but you can simply create your class at the .scss file, up to you, hope this help who's in doubt.