Как я могу отсортировать таблицу (клик) по заголовку? - PullRequest
Новая
       18

Как я могу отсортировать таблицу (клик) по заголовку?

0 голосов
/ 28 февраля 2019

Какую логику я должен использовать для сортировки своих элементов?

Здесь я генерирую все столбцы и строки.

dynamic-table.component.html

  <table>
    <tr>
      <th *ngFor="let col of columns" (click)="onClickSort()">{{col}}</th>
    </tr>
    <tr *ngFor="let user of users">
      <td *ngFor="let col of columns">{{user[col]}}</td>
    </tr>
  </table>

dynamic-table.component.ts

import {Component, Input, OnInit } from '@angular/core';

@Component({
  selector: 'app-dynamic-table',
  templateUrl: './dynamic-table.component.html',
  styleUrls: ['./dynamic-table.component.css']
})
export class DynamicTableComponent implements OnInit {
  @Input()
  users = [];
  @Input()
  columns: string[];
  constructor() {
  }
  onClickSort() {
    //ADD LOGIC SORT
  }
  ngOnInit() {
  }
}

Мои данные находятся в mock.ts, я могу найти их в моем сервисе.

app.component.ts

import {Component, OnInit } from '@angular/core';
import {TableService} from './table.service';
@Component({
  selector: 'app-root',
  styleUrls: ['./app.component.css'],
  templateUrl: './app.component.html',
})
export class AppComponent implements OnInit {
  users;
  columns;
  constructor(private atService: TableService) {
  }
  ngOnInit(): void {
    this.columns = this.atService.getColumns();
    this.atService.getUsers().subscribe((res) => this.users = res);
  }
}

Ответы [ 3 ]

0 голосов
/ 28 февраля 2019

Я фанат ngx-datatable - библиотеки красивых таблиц с сортировкой и поиском.

Пример сортировки - просто добавлениеодиночное свойство для компонента <ngx-datatable></<ngx-datatable>.

0 голосов
/ 28 февраля 2019

Вы можете написать трубу , которая принимает данные и возвращает данные, отсортированные так, как вы предпочитаете.

<li *ngFor="let item of items | sortingPipe: filterarg">

И труба myfilter будет делать что-то вроде этого: 

@Pipe({
  name: 'sortingPipe'
})
export class SortingPipe implements PipeTransform {

  transform(myArr, filterArg) {

    const sorted = myArr.sort((x, y) => {
      return x.duration - y.duration; // whatever you want to compare
    });
    return sorted.slice(0);

  }
}
0 голосов
/ 28 февраля 2019

Для этого есть хорошая библиотека

https://www.kryogenix.org/code/browser/sorttable/

Это очень просто в использовании.

Просто загрузите скрипт в ваш html-файл и измените заголовок, добавив сортируемый (с одним t) класс, например: 

<script src="sorttable.js"></script>
 <table>
    <tr>
      <th *ngFor="let col of columns">{{col}}</th>
    </tr>
    <tr *ngFor="let user of users">
      <td *ngFor="let col of columns">{{user[col]}}</td>
    </tr>
  </table>
...