Как использовать пользовательскую функцию сортировки по щелчку заголовка столбца, угловая библиотека 6 + ngx-easy-table

Question

Угловая версия: 6
Библиотека таблиц: ngx-easy-table
Ссылки на библиотечные ссылки:
https://stackblitz.com/edit/ngx-easy-table?file=app%2Fcomponents%2Fserver-sort%2Fserver-sort.component.ts
https://github.com/ssuperczynski/ngx-easy-table/wiki

Используя вышеупомянутую библиотеку таблиц, я хочу отсортировать определенные столбцы, используя мою пользовательскую функцию сортировки по щелчку этого конкретного заголовка / заголовка столбца.В приведенной выше ссылке на стекаблиц есть пример пользовательской сортировки, которая позволяет нам сделать это, но поместив отдельную кнопку для каждого столбца.

Кроме того, я использую <ng-template> для отображения данных таблицы, как показано ниже:

<ngx-table [configuration]="configuration" [data]="upcomingBookingsList" [columns]="columns" (event)="eventEmitted($event)">
  <ng-template let-row>
    <td>
      <a class="list-id-styles" (click)="openBookingDetailsModal(row['id'])">{{row.id}}</a>
    </td>
    <td>
      {{row.webStatus}}
    </td>
    <td>
      {{row.guestDOB }}
    </td>
    <td>
      {{row.startDateNTime }}
    </td>
    <td>
      {{row.updateDate }}
    </td>
  </ng-template>
</ngx-table>

Было бы здорово получить помощь по этому вопросу!

Answer 1

Я создатель этой библиотеки.Решение действительно простое.Пожалуйста, проверьте ссылку здесь , где описан этот пример.

Вам необходимо проверить в методе eventEmitted, какой ключ заголовка был нажат.Затем вызовите свой собственный метод сортировки, в этом случае sortByLastName

eventEmitted($event) {
  if ($event.event === 'onOrder') {
    if ($event.value.key === 'name') {
      this.sortByLastName($event.value.order === 'asc');
    }
}

private sortByLastName(asc: boolean): void {
  this.data = [...this.data.sort((a, b) => {
    const nameA = a.name.toLowerCase().split(' ')[1];
    const nameB = b.name.toLowerCase().split(' ')[1];
    if (nameA < nameB) {
      return asc ? -1 : 1;
    }
    if (nameA > nameB) {
      return asc ? 1 : -1;
    }
    return 0;
  })];
}