带有 Angular 2 的 NGX-Datatable - 换行列的名称

Question

我有一个带有 Angular 2 的 ngx-datatable，它有一些很长的列名。我想复制他们对行的自动高度 (Link to Documentation) 所做的操作，但会满足于将非常长的名称包装成多行。

通常这不会成为问题，但由于我对 Angular 很陌生，所以我被卡住了。像 overflow-wrap 或 word-wrap 这样的普通东西似乎不起作用。任何帮助和/或建议将不胜感激。谢谢！

我当前的代码：

  <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

将此添加到 CSS 中就可以了。它还使列 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

此外，您可以在 ng-template 或 ngx-datatable-column 标签处尝试以下代码：

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

我使用了 UI KIT 库，但你可以简单地在 .scss 文件中创建你的 class，由你决定，希望这对有疑问的人有所帮助。

带有 Angular 2 的 NGX-Datatable - 换行列的名称

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

datatable

angular-datatables

angular-material2

angular