Tabellen in Angular sortieren

Oluwafisayo Oluwatayo 15 Februar 2024

Angular Angular Sort Angular Table

Tabelle sortieren mit Angular Material
Tabelle sortieren mit Bootstrap
Sortiertabelle mit dem ng-model
Abschluss

Webseiten sind eine großartige Möglichkeit, Präsentationen zu erstellen; Wenn es darum geht, statistische Daten aufzubereiten, eine Preisliste von Artikeln zu erstellen oder Artikel zu klassifizieren, ist es meistens erforderlich, dass wir eine Tabelle erstellen, die es uns ermöglicht, diese Listen zu sortieren.

Wir können die Tabelle in aufsteigender Reihenfolge, absteigend usw. sortieren. Sehen wir uns nun die besten Methoden an, die wir anwenden können, um Tabellen mit Sortierfunktion innerhalb des Angular-Frameworks zu erstellen.

Tabelle sortieren mit Angular Material

Es ist keine Neuigkeit mehr, dass die Angular-Materialabhängigkeit die ideale Bibliothek für jede Art von Angular-Komponente ist; Für diese Methode werden wir die Angular Material-Bibliothek installieren.

Nachdem der Projektordner erstellt wurde, wechseln Sie in den Projektordner in Ihrem Terminal und installieren Sie die Angular-Abhängigkeit Material mit: ng add @angular/material; Sobald dies erledigt ist, besteht der nächste Schritt darin, die Seitenstruktur mit Angular-Codes zu erstellen, die mit Material für die Sortiertabelle vorbereitet sind.

In die Datei app.component.html fügen wir diese Codes ein.

Code-Snippet app.component.html:

<table mat-table [dataSource]="dataSource" matSort (matSortChange)="announceSortChange($event)"
  class="mat-elevation-z8">
  <ng-container matColumnDef="position">
    <th mat-header-cell *matHeaderCellDef mat-sort-header sortActionDescription="Sort by number">
      No.
    </th>
    <td mat-cell *matCellDef="let element"> {{element.position}} </td>
  </ng-container>
  <ng-container matColumnDef="name">
    <th mat-header-cell *matHeaderCellDef mat-sort-header sortActionDescription="Sort by name">
      Name
    </th>
    <td mat-cell *matCellDef="let element"> {{element.name}} </td>
  </ng-container>
  <ng-container matColumnDef="weight">
    <th mat-header-cell *matHeaderCellDef mat-sort-header sortActionDescription="Sort by weight">
      Weight
    </th>
    <td mat-cell *matCellDef="let element"> {{element.weight}} </td>
  </ng-container>
  <ng-container matColumnDef="symbol">
    <th mat-header-cell *matHeaderCellDef mat-sort-header sortActionDescription="Sort by symbol">
      Symbol
    </th>
    <td mat-cell *matCellDef="let element"> {{element.symbol}} </td>
  </ng-container>
  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>

Wir richten die Tabellenstruktur in dieser Datei wie die Kopfzeilen, Zeilen und Spalten ein.

Als nächstes gehen wir zur Datei app.component.ts, um Codes einzurichten, die die Tabelle steuern; Wir werden diese Codes schreiben:

Code-Snippet app.component.ts:

import { LiveAnnouncer } from '@angular/cdk/a11y';
import { AfterViewInit, Component, ViewChild } from '@angular/core';
import { MatSort, Sort } from '@angular/material/sort';
import { MatTableDataSource } from '@angular/material/table';

export interface PeriodicElement {
  name: string;
  position: number;
  weight: number;
  symbol: string;
}
const ELEMENT_DATA: PeriodicElement[] = [
  { position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H' },
  { position: 2, name: 'Helium', weight: 4.0026, symbol: 'He' },
  { position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li' },
  { position: 4, name: 'Beryllium', weight: 9.0122, symbol: 'Be' },
  { position: 5, name: 'Boron', weight: 10.811, symbol: 'B' },
  { position: 6, name: 'Carbon', weight: 12.0107, symbol: 'C' },
  { position: 7, name: 'Nitrogen', weight: 14.0067, symbol: 'N' },
  { position: 8, name: 'Oxygen', weight: 15.9994, symbol: 'O' },
  { position: 9, name: 'Fluorine', weight: 18.9984, symbol: 'F' },
  { position: 10, name: 'Neon', weight: 20.1797, symbol: 'Ne' },
];
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements AfterViewInit {
  title = 'sortone';
  displayedColumns: string[] = ['position', 'name', 'weight', 'symbol'];
  dataSource = new MatTableDataSource(ELEMENT_DATA);
  constructor(private _liveAnnouncer: LiveAnnouncer) { }
  @ViewChild(MatSort) sort: MatSort;
  ngAfterViewInit() {
    this.dataSource.sort = this.sort;
  }
  announceSortChange(sortState: Sort) {
    if (sortState.direction) {
      this._liveAnnouncer.announce(`Sorted ${sortState.direction}ending`);
    } else {
      this._liveAnnouncer.announce('Sorting cleared');
    }
  }
}

Zuerst importieren wir die benötigten Module aus der Angular-Bibliothek Material; dann deklarieren wir die Art der Eingabe, die in jedem Tabellenkopf enthalten sein wird; für name deklarieren wir den Typ string und für weight und position deklarieren wir den type number.

Dann deklarieren wir die Daten, die wir in der Tabelle haben wollen, in Form eines Arrays; Als nächstes erstellen wir die Funktion sortieren mit this.dataSource.sort.

Die Datei app.module.ts ist das Modul, das die Module und Abhängigkeiten verwaltet, die wir für unsere App verwenden, daher müssen wir die Abhängigkeiten hier importieren. Die Datei sollte wie unten aussehen.

Code-Snippet app.module.ts:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatTableModule } from '@angular/material/table';
import { FormsModule } from '@angular/forms';
import { DragDropModule } from '@angular/cdk/drag-drop';
import { MatSortModule } from '@angular/material/sort';
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    MatTableModule,
    FormsModule,
    DragDropModule,
    MatSortModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Wo ist die Schönheit und Platzierung einer Seite ohne CSS? Fügen Sie einfach dieses kleine Code-Snippet wie unten in die Datei app.component.css ein.

Code-Snippet app.component.css:

table {
    width: 100%;
  }

  th.mat-sort-header-sorted {
    color: black;
  }

Ausgang:

Tabelle mit Angular Material sortieren

Tabelle sortieren mit Bootstrap

Bootstrap macht das Leben eines Programmierers einfacher; wo wir einen Roman von Codes schreiben sollten, hilft uns Bootstrap, prägnantere Codes mit besserer Funktionalität zu schreiben.

Wie das Angular Material installieren wir auch die Bootstrap-Bibliothek im Projektordner mit ng add @ng-bootstrap/ng-bootstrap. Nach erfolgreicher Installation navigieren wir zur Datei app.component.html, um diese Codes zu schreiben.

Code-Snippet app.component.html:

<h2>Sort Table with Bootstrap</h2>
<table class="table table-striped">
  <thead>
  <tr>
    <th scope="col">#</th>
    <th scope="col" sortable="name" (sort)="onSort($event)">Country</th>
    <th scope="col" sortable="area" (sort)="onSort($event)">Area</th>
    <th scope="col" sortable="population" (sort)="onSort($event)">Population</th>
  </tr>
  </thead>
  <tbody>
  <tr *ngFor="let country of countries">
    <th scope="row">{{ country.id }}</th>
    <td>
      <img [src]="'https://upload.wikimedia.org/wikipedia/commons/' + country.flag" class="me-2" style="width: 20px">
      {{ country.name }}
    </td>
    <td>{{ country.area | number }}</td>
    <td>{{ country.population | number }}</td>
  </tr>
  </tbody>
</table>

Hier erstellen wir die Struktur der Tabelle und die Kopfzeilen; Jetzt müssen wir zur Datei app.component.ts gehen, um die Codes zu schreiben, damit die Tabelle funktioniert.

Die Datei sieht wie folgt aus.

Code-Snippet app.component.ts:

import { Component, Directive, EventEmitter, Input, Output, QueryList, ViewChildren } from '@angular/core';

interface Country {
  id: number;
  name: string;
  flag: string;
  area: number;
  population: number;
}
const COUNTRIES: Country[] = [
  {
    id: 1,
    name: 'Russia',
    flag: 'f/f3/Flag_of_Russia.svg',
    area: 17075200,
    population: 146989754
  },
  {
    id: 2,
    name: 'Canada',
    flag: 'c/cf/Flag_of_Canada.svg',
    area: 9976140,
    population: 36624199
  },
  {
    id: 3,
    name: 'United States',
    flag: 'a/a4/Flag_of_the_United_States.svg',
    area: 9629091,
    population: 324459463
  },
  {
    id: 4,
    name: 'China',
    flag: 'f/fa/Flag_of_the_People%27s_Republic_of_China.svg',
    area: 9596960,
    population: 1409517397
  }
];

export type SortColumn = keyof Country | '';
export type SortDirection = 'asc' | 'desc' | '';
const rotate: {[key: string]: SortDirection} = { 'asc': 'desc', 'desc': '', '': 'asc' };
const compare = (v1: string | number, v2: string | number) => v1 < v2 ? -1 : v1 > v2 ? 1 : 0;
export interface SortEvent {
  column: SortColumn;
  direction: SortDirection;
}
@Directive({
  selector: 'th[sortable]',
  host: {
    '[class.asc]': 'direction === "asc"',
    '[class.desc]': 'direction === "desc"',
    '(click)': 'rotate()'
  }
})
export class NgbdSortableHeader {
  @Input() sortable: SortColumn = '';
  @Input() direction: SortDirection = '';
  @Output() sort = new EventEmitter<SortEvent>();
  rotate() {
    this.direction = rotate[this.direction];
    this.sort.emit({column: this.sortable, direction: this.direction});
  }
}
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'sortfive';
  countries = COUNTRIES;
  @ViewChildren(NgbdSortableHeader) headers!: QueryList<NgbdSortableHeader>;
  onSort({column, direction}: SortEvent) {
    this.headers.forEach(header => {
      if (header.sortable !== column) {
        header.direction = '';
      }
    });
    if (direction === '' || column === '') {
      this.countries = COUNTRIES;
    } else {
      this.countries = [...COUNTRIES].sort((a, b) => {
        const res = compare(a[column], b[column]);
        return direction === 'asc' ? res : -res;
      });
    }
  }
}

Hier haben wir zuerst den Datentyp deklariert, der in jede Tabelle eingegeben wird, und da wir die Elemente aus den Headern sortieren werden, müssen wir den NgbdSortableHeader in einer export-Klasse deklarieren.

Dann gehen wir in die Datei app.module.ts, um die notwendigen Module zu importieren, die wir von ng-bootstrap angewendet haben.

Code-Snippet app.module.ts:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent, NgbdSortableHeader } from './app.component';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { CommonModule } from '@angular/common';

@NgModule({
  declarations: [
    AppComponent,NgbdSortableHeader
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    NgbModule,
    CommonModule
  ],
  exports: [AppComponent],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Ausgang:

Tabelle mit Bootstrap sortieren

Sortiertabelle mit dem `ng-model`

Dieses Beispiel ist das codeeffizienteste von allen, da dieses Beispiel im Gegensatz zu den ersten beiden oben, die alle Komponenten des Ordners app verwenden, nur die Datei index.html verwendet, da das ng-model binden kann den Wert der HTML-Steuerelemente zu den Anwendungsdaten. Außerdem müssen Sie keine Abhängigkeit installieren, damit diese Methode funktioniert.

Sobald der Projektordner erstellt wurde, gehen wir in die Datei index.html, um diese Codes zu schreiben.

index.html:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Sortfour</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
  <body>
    <div class="container">
        <div ng-app="myApp" ng-controller="namesCtrl" ng-init="IsReverse=false">
        Search: <input type="text" ng-model="test"><br>
        <table class="table table-hover table-bordered table-striped">
          <tr>
              <th ng-click="sort('Name')">Name
              <th ng-click="sort('Age')">Age
              <th ng-click="sort('Email')">Email
              <th>Actions</th>
          </tr>
          <tr ng-repeat="x in names | filter:test | orderBy:sortParam:IsReverse">
              <td>{{x.Name}}
              <td>{{x.Age}}
              <td>{{x.Email}}
              <td>
                <div class="btn-group">
                    <a class="btn btn-primary" href="#">EDIT</a>
                    <a class="btn btn-primary" href="#">DELETE</a>
                </div>
              </td>
          </tr>
          </table>

    </div>

    <script>
    angular.module('myApp', []).controller('namesCtrl', function($scope) {
        $scope.names = [
            {Name:'Manav',Age:'22',Email:'pandya.manav@gmail.com'},
            {Name:'Rahul',Age:'25',Email:'pnd.rahul@gmail.com'},
            {Name:'Rohan',Age:'28',Email:'pnd.rohan@gmail.com'},
            {Name:'Jinish',Age:'18',Email:'jinish@gmail.com'}
        ];
        $scope.sort = function(sortId) {
            $scope.sortParam =  sortId;
            if($scope.IsReverse)
            {
                $scope.IsReverse = false;
            }
            else
            {
                $scope.IsReverse = true;
            }
        };
    });
    </script>
    </body>
</body>
</html>

Zuerst haben wir die Tabellen erstellt. Anschließend fügten wir die Überschriften hinzu und machten sie mit der Funktion ng-click anklickbar, um die Tabelle anhand der Überschriften sortieren zu können.

Dann haben wir die gewünschten Daten in der Tabelle in Form eines Arrays erstellt und in der Funktion $scope deklariert; Dadurch können wir die Sortierfunktion hinzufügen, indem wir die Funktion $scope.sort verwenden.

Ausgang:

Tabelle mit dem ng-Modell sortieren

Abschluss

Dank der Flexibilität des Angular-Frameworks werden wir mit hervorragenden Optionen verwöhnt, die uns helfen, Tabellen mit der Sortierfunktionalität zu erstellen.

Autor: Oluwafisayo Oluwatayo

Fisayo is a tech expert and enthusiast who loves to solve problems, seek new challenges and aim to spread the knowledge of what she has learned across the globe.

Tabelle sortieren mit Angular Material

Tabelle sortieren mit Bootstrap

Sortiertabelle mit dem ng-model

Abschluss

Verwandter Artikel - Angular Table

Sortiertabelle mit dem `ng-model`