Word Wrapping of Column Name

Question

I am using ngx-datatable to display my data, and i dont want to show horizontal scroll bar so i need to word wrap the column name so that i can reduce the width of columns and eventually remove horizontal scroll bar

I tried to add this css so that it gets wrapped but it seems not to work

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

I tried to use word-break as well, but that is also not working.

This is my HTML

<ngx-datatable style="height: 410px" class="material" [rows]="assignedTinYearsList" [columns]="assignedTinYearsListColumns" [sortType]="'multi'"
                        [columnMode]="'standard'" [headerHeight]="50" [footerHeight]="50" [rowHeight]="50" [limit]="10" [scrollbarV]="true" [scrollbarH]="true">
                        </ngx-datatable>

and this is the column name list

this.assignedTinYearsListColumns = [
            { 'name': 'TIN Year Name', 'prop': 'tinYearName', 'cellTemplate': this.tinYearLinkColumnTpl },
            { 'name': 'TIN', 'prop': 'tin', 'cellTemplate': this.tinLinkColumnTpl },
            { 'name': 'CMS Quality Rep. Type', 'prop': 'reportingType' },
            { 'name': 'CMS IA Rep. Type',  'word-wrap': 'break-word', 'prop': 'iaReportingType' },
            { 'name': 'MFFS Billing', 'prop': 'mffsBilling', 'width': '100', 'cellTemplate':this.provdetailmffsyesNoColumnTemplate},
            { 'name': 'Quality Goal Exclusion', 'word-wrap': 'break-word', 'prop': 'qualityGoalsExclusion','width': '170', 'cellTemplate': this.qualityCheckBoxColumnTpl },
            { 'name': 'Quality Exclusion Reason', 'overflow-wrap': 'break-word', 'prop': 'qualityExclusionReason', 'width': '192', 'cellTemplate': this.QualityDropShowReason },
            { 'name': 'IA Goal Exclusion', 'prop': 'goalExclusion','width': '130', 'cellTemplate': this.checkBoxColumnTpl },
            { 'name': 'IA Exclusion Reason', 'prop': 'exclusionReason', 'width': '192', 'cellTemplate': this.DropShowReason },
        ];

I need to wrap the size of column name such as 'Quality Goal Exclusion'. Request for suggestions.

GSangram · Answer 1 · 2020-07-13T11:42:42.887

Apply below styles to datatable-header-cell-template-wrap class which gets created as a child of datatable-header-cell class element

  .ngx-datatable.fixed-header .datatable-header .datatable-header-inner .datatable-header-cell .datatable-header-cell-template-wrap {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: normal;
      vertical-align: middle;
      font-size: 12px;
      margin: -5px -10px 0px -10px;
      line-height: 1.2em;
      height: 4em;
    }

You can tweak line-height, height, padding and size values according to your need.

score 0 · Answer 2 · answered Apr 18 '19 at 13:09

0

In my case, I use [columnMode] = "'force'" to use 'flexbox' and for each row:

<ngx-datatable-column name="event" prop="event" [flexGrow]="1">
    <ng-template let-column="column" ngx-datatable-header-template>
        <div> foo </div>
    </ng-template>
    <ng-template let-value="value" ngx-datatable-cell-template>
        <div> {{value}} </div>
    </ng-template>
</ngx-datatable-column>

It generates more code but it is easier to edit.

answered Apr 18 '19 at 13:09

Pablo M.

494
7
14

Thank you for the response. I tried with ` [ColumnMode] = "'force'" `, but not working for the way i have done the html part. – SSharma2203 Apr 18 '19 at 14:06

Word Wrapping of Column Name

2 Answers2