如何通过点击header（ngx-datatable）来开发排序栏？

Question

如何通过点击header来开发排序栏？

我正在尝试按照文档中的说明进行操作，但它不起作用。

 <ngx-datatable
    #table
    ...
    [rows]='vendors'>

    <ngx-datatable-column name="VENDOR" [flexGrow]="1">
      <ng-template let-column="column" let-sort="sortFn" let-sortDir="sortDir">
        <span (click)="sort($event, sortDir, sortFn)">{{column.name}}</span>
      </ng-template>
      <ng-template let-row="row" let-value="value" ngx-datatable-cell-template>
        <div class="vendor-name">{{row.vendorName}}</div>
      </ng-template>
    </ngx-datatable-column>

Answer 1

首先，ngx-datatable默认是支持Sorting的。不要将任何参数传递给排序函数。这不是必需的。这样做：

<ngx-datatable-column name="VENDOR" [flexGrow]="1" [sortable]="true">

Answer 2

如果您使用 ng-template 定义您的列 header，排序将不起作用。默认排序仅在您创建仅具有 ngx-datatable-cell-template 属性的基本列时才有效。

这个有效：

  <ngx-datatable-column name="Navn" prop="name" [flexGrow]="3">
    <ng-template let-value="value" ngx-datatable-cell-template>
      <span [attr.aria-label]="value">{{ value }}</span>
    </ng-template>
  </ngx-datatable-column>

这不是：

  <!-- Name -->
  <ngx-datatable-column name="Navn" prop="name" [flexGrow]="3">
    <ng-template let-column="column" ngx-datatable-header-template>
      <span aria-label="Name">{{ column.name }}</span>
    </ng-template>

    <ng-template let-value="value" ngx-datatable-cell-template>
      <span [attr.aria-label]="value">{{ value }}</span>
    </ng-template>
  </ngx-datatable-column>

如何通过点击header（ngx-datatable）来开发排序栏？

How to develop sortable column by click on header ( ngx-datatable)?

ngx-datatable

angular