修复 ngx-datatable 中的 header

Question

我正在尝试修复 ngx-datatable 的 header，如下所示： https://swimlane.ZBF215181B5140522137B3D4F6B735#virtual-sc.io/ngx-datatable

我需要一个带有固定 header 和可滚动内容的表格。

下面是代码：

  <ngx-datatable
[rows]="qrCodes"
class="material qr-list-table"
[columnMode]="'force'"

[rowHeight]="'auto'"
[limit]="10"
[count]="10"
[selected]="selected"
[selectAllRowsOnPage]="false"
[displayCheck]="displayCheck"
(activate)="onActivate($event)"
(select)="onSelect($event)"
[scrollbarV]="true"
[scrollbarH]="false"
[selectionType]="SelectionType.checkbox"
(mouseover)="getMouseOver()" (mouseleave)="getMouseLeave()">


<ngx-datatable-column
  [headerCheckboxable]="true"
  [checkboxable]="true">
</ngx-datatable-column>


<ngx-datatable-column prop="name">
  <ng-template ngx-datatable-header-template>
    Name of QR Code
  </ng-template>

  <ng-template ngx-datatable-cell-template let-row="row" let-value="value">
    <div class="row qr-info">
            {{row.name}}
    </div>
  </ng-template>
</ngx-datatable-column>

<ngx-datatable-column prop="created">
  <ng-template ngx-datatable-header-template>
    QR Type
  </ng-template>
    <ng-template ngx-datatable-cell-template let-row="row" let-column="column" let-value="value" ngIf="isHoverButtonVisible">
        {row?.qr_type_display}}
    </ng-template>
</ngx-datatable-column>

我从中获取数据的 ts 文件如下：

ngOnInit() {

this.qrCodes = this.qrCodeService.qrCodes;}

Answer 1

在 ngx-datatable 指令中传递另一个属性[scrollbarV]="true"

例如：

<ngx-datatable [scrollbarV]="true"> </ngx-datatable>

Answer 2

试试下面的代码。 它会工作

HTML 代码

  <div style="height:100%;">
    <ngx-datatable class="material server-scrolling-demo" [rows]="resultList" [columnMode]="columnMode.force"
      [headerHeight]="50" [rowHeight]="50" [loadingIndicator]="false" [scrollbarV]="true" [scrollbarH]="true"
      style="height: 100%;">
      <ngx-datatable-column *ngFor="let columnInfo of columnInfoArray" name="{{columnInfo['label']}}"
        prop="{{columnInfo['prop']}}">
      </ngx-datatable-column>
    </ngx-datatable>
  </div>

Typescript码

import { ColumnMode } from "@swimlane/ngx-datatable";

  // inside class global variables
  public columnMode = ColumnMode;

  public resultList = [{
    user_name: "Test",
    email: "test@example.com",
    phone_number: "022 3254 2454 45",
    gender: "Male",
    address: "1, Main street, Chennai - 600123"
  }]

  public columnInfoArray = [{
    label: "User Name",
    prop: "user_name"
  }, {
    label: "Email",
    prop: "email"
  }, {
    label: "Phone",
    prop: "phone_number"
  }, {
    label: "Gender",
    prop: "gender"
  }, {
    label: "Address",
    prop: "address"
  }]