Fix header in ngx-datatable

Question

I am trying to fix the header of ngx-datatable provided as in: https://swimlane.github.io/ngx-datatable/#virtual-scroll

I need to have a table with fixed header and scroll-able content.

Below is the code:

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

and ts file from where I am getting the data is as below:

ngOnInit() {

this.qrCodes = this.qrCodeService.qrCodes;}

Answer 1

In ngx-datatable directive pass another property [scrollbarV]="true"

For example:

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

Answer 2

Try following code. It will work

HTML Code

  <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 code

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