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.

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>

score 21 · Accepted Answer · answered Sep 18 '17 at 16:51

21

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

answered Sep 18 '17 at 16:51

213374you

226
3
3

Great solution, wanted to add and say thanks, helped me out of a fix. – rrd Jul 26 '18 at 08:38
LEGEND!! saved me bro – roblawford Oct 06 '21 at 09:30

score 0 · Answer 2 · answered Oct 28 '20 at 16:54

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.

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

2 Answers2