Non sono riuscito a contare il numero di tabelle su cui ho lavorato che richiedevano almeno una colonna ordinabile. È il tipo di cosa che gli utenti amano, forse perché dà loro un controllo straordinario sui propri dati. Agli albori del Web, ho utilizzato JavaScript per implementare l’ordinamento personalizzato. Ora, ci sono molti widget di terze parti che hanno funzionalità di ordinamento integrate. A questo proposito, Angular non fa eccezione. La Material Data Table, o MatTable, è piena zeppa di funzionalità, tra cui l’impaginazione, l’ordinamento, il filtraggio, solo per citarne alcune. Questo tutorial descriverà come offrire agli utenti la possibilità di ordinare le colonne della tabella utilizzando il meccanismo di ordinamento integrato di MatTable.

Anteprima demo

Alcuni lettori potrebbero non sapere che sono anche un musicista professionista e un artista discografico. Per unire le mie due passioni, ho creato una tabella per tenere traccia di alcuni dei miei singoli in uscita digitale. Ecco una schermata della demo finita:

Come puoi vedere, contiene cinque colonne, tutte ordinabili tranne la colonna Thumb. L’ordinamento corrente è indicato da una freccia a destra dell’intestazione della colonna. Per impostazione predefinita, le colonne vengono visualizzate nello stesso ordine dell’origine dati sottostante. Vorrei ordinare le righe della tabella per Data di rilascio in ordine decrescente, in modo che la versione più recente appaia nella parte superiore della tabella, come appaiono nella schermata sopra. Vedremo come farlo nella prossima sezione.

Impostazione dell’ordinamento iniziale

Il primo passaggio consiste nel rendere ordinabili le colonne della tabella. Per fare ciò, importa la direttiva MatSort e aggiungi mat-sort-header a ciascuna cella di intestazione di colonna che dovrebbe attivare l’ordinamento:

<mat-table [dataSource]="dataSource" matSort>

MatSort è un contenitore per MatSortables per gestire lo stato di ordinamento e fornire parametri di ordinamento predefiniti. Possiamo fare riferimento ad esso utilizzando @ViewChild Property Decorator per accedere alle sue proprietà. L’ordinamento iniziale è impostato nell’hook OnInit della nostra classe di tabella:

import {Component, OnInit, ViewChild} from '@angular/core';
import {MatTableDataSource, MatSort, Sort} from '@angular/material';

export class TableSortingExample implements OnInit {
  public displayedColumns = [
    'name', 
    'coverOrOriginal', 
    'releaseDate',
    'length',
    'thumbnailUrl'
  ];
  public dataSource = new MatTableDataSource(RELEASES);
  @ViewChild(MatSort) private sort: MatSort;

  ngOnInit() {
    this.dataSource.sort = this.sort;

    const sortState: Sort = {
      active: 'releaseDate', 
      direction: 'desc'
    };
    this.sort.active = sortState.active;
    this.sort.direction = sortState.direction;
    this.sort.sortChange.emit(sortState);
  }
}

Rendere ordinabile una colonna

Dopo aver aggiunto la funzionalità di ordinamento alla tabella utilizzando le istruzioni precedenti, tutto ciò che devi fare per designare una colonna come ordinabile è aggiungere la direttiva mat-sort-header all’elemento nel modello. Ecco la colonna del nome:

  
<!-- name Column -->
<ng-container matColumnDef="name">
  <mat-header-cell *matHeaderCellDef mat-sort-header> Name </mat-header-cell>
  <mat-cell *matCellDef="let element"> {{element.name}} </mat-cell>
</ng-container>

Ordinamento avanzato

Il MatTableDataSource esegue l’ordinamento partendo dal presupposto che il nome della colonna ordinata corrisponda al nome della proprietà dei dati visualizzato nella colonna. Se le proprietà dei dati non corrispondono ai nomi delle colonne o se è necessaria una funzione di accesso alle proprietà dei dati più complessa, è possibile utilizzare una funzione sortingDataAccessor personalizzata per sovrascrivere la funzione di accesso ai dati predefinita in MatTableDataSource. Ecco un esempio che ordina una colonna di data in cui è stata utilizzata una stringa anziché un tipo di data:

ngAfterViewInit() {
  this.dataSource.sortingDataAccessor = (item, property) => {
    switch (property) {
      case 'date': {
        return new Date(item.date);
      }
      default: {
        return item[property];
      }
    };
  }
}

Se non si utilizza MatTableDataSource, ma si fornisce un array di dati direttamente alla tabella, è possibile ascoltare l’evento matSortChange dell’ordinamento e riordinare i dati in base al ordinare stato. Successivamente, potrebbe essere necessario invocare renderRows() sulla tabella, poiché non controllerà automaticamente l’array per le modifiche. QuiE’ una tabella che contiene le informazioni nutrizionali dei deserti che utilizza l’hook matSortChange per ordinare sulla colonna Carbs:

<table matSort (matSortChange)="sortData($event)" matSortActive="carbs" matSortDirection="asc">

La funzione sortData() gestisce tutto l’ordinamento per la tabella:

public sortData(sort: Sort) {
  const data = this.desserts.slice();
  if (!sort.active || sort.direction === '') {
    this.sortedData = data;
    return;
  }

  this.sortedData = data.sort((a, b) => {
    const isAsc = sort.direction === 'asc';
    switch (sort.active) {
      case 'name': return compare(a.name, b.name, isAsc);
      case 'calories': return compare(a.calories, b.calories, isAsc);
      case 'fat': return compare(a.fat, b.fat, isAsc);
      case 'carbs': return compare(a.carbs, b.carbs, isAsc);
      case 'protein': return compare(a.protein, b.protein, isAsc);
      default: return 0;
    }
  });
}

function compare(a: number | string, b: number | string, isAsc: boolean) {
  return (a < b ? -1 : 1) * (isAsc ? 1 : -1);
}

Conclusione

In questo tutorial abbiamo imparato come dare ai tuoi utenti la possibilità di ordinare le colonne della tabella utilizzando il meccanismo di ordinamento integrato di MatTable.

Rob Gravelle risiede a Ottawa, in Canada, ed è un guru IT da oltre 20 anni. In quel periodo, Rob ha costruito sistemi per organizzazioni legate all’intelligence come Canada Border Services e varie attività commerciali. Nel suo tempo libero, Rob è diventato un artista musicale affermato con diversi CD e uscite digitali a suo merito.