[SOLVED] NGX-Datatable with Angular 2

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

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.

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>

Solution

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;
}