css 修复ngx-datatable中的标头

zpgglvta 于 2022-11-26 发布在其他

关注(0)|答案(1)|浏览(154)

我正在尝试修复ngx-datatable的标头，如下所示：https://swimlane.github.io/ngx-datatable/#virtual-scroll
我需要有一个固定的标题和可滚动的内容表。
下面是代码：

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

css

来源：https://stackoverflow.com/questions/58623579/fix-header-in-ngx-datatable

1条答案

按热度按时间

68bkxrlz1#

请尝试以下代码。它将工作

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>

键入脚本代码

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"
  }]

赞(0）回复(0）举报 2022-11-26

我来回答

css 修复ngx-datatable中的标头

1条答案

相关问题

热门标签

最新问答