Componente de encabezado de clasificación de material angular

Angular Material es una biblioteca de componentes de interfaz de usuario, desarrollada por Google, para desarrollar aplicaciones modernas de forma estructurada y receptiva por parte de los desarrolladores de Angular. Al hacer uso de esta biblioteca, podemos aumentar en gran medida la experiencia de usuario de un usuario final, ganando así popularidad para nuestra aplicación. Esta biblioteca contiene elementos modernos listos para usar que se pueden usar directamente con un mínimo de código adicional o sin él.

El componente <mat-sort-header> se usa para ordenar los datos de una tabla en orden ascendente o descendente. Para que la clasificación funcione, debemos agregar <mat-sort-header> a cada encabezado de tabla y proporcionar una ID que lo identifique. Estos encabezados de tabla deben colocarse dentro de un elemento principal con la directiva matSort para que cada vez que hagamos clic en cualquier encabezado de tabla para ordenar, se emita un evento conocido como matSortChange que contiene la dirección de clasificación y el ID del nombre de columna para el que se activó.

Podemos deshabilitar la ordenación de una tabla de 2 formas:

• Podemos agregar la propiedad matSortDisabled   en la directiva matSort , o
• Agregar atributo deshabilitado en cualquier encabezado de tabla individual

Sintaxis:

<table matSort (matSortChange)="sortData($event)">
   <tr>
     <th mat-sort-header="column_id">
         Column 1
     </th>
   </tr>
   <tr>
     <td>Data</td>
   </tr>
</table>

Sintaxis de instalación:

Para usar la sección de tarjeta básica en el material angular, debemos tener instalado Angular CLI en la máquina local, lo que ayudará a agregar y configurar la biblioteca de material angular. Después de cumplir con la condición requerida, escriba el siguiente comando en Angular CLI:

ng add @angular/material

Consulte el artículo Adición de un componente de material angular a una aplicación angular para conocer el procedimiento de instalación detallado.

Agregando el componente Sort-Header:

Para usar el componente de encabezado de clasificación, debemos importarlo a nuestro componente, de la siguiente manera:

import { Sort } from '@angular/material/sort';

Luego, necesitamos importar este componente al archivo app.module.ts .

import {MatSortModule} from '@angular/material/sort';

Estructura del proyecto:

Después de una instalación exitosa, la estructura del proyecto se verá como la siguiente imagen:

Estructura del proyecto

Ejemplo: El siguiente ejemplo ilustra la implementación del encabezado de clasificación de material angular.

import { CommonModule } from "@angular/common";
import { NgModule } from "@angular/core";
  
import { BrowserModule } from "@angular/platform-browser";
import { AppComponent } from "./app.component";
import { BrowserAnimationsModule } from
    "@angular/platform-browser/animations";
  
import { SortOverviewExampleComponent } from
    "./sort-overview-example/sort-overview-example.component";
import { MatSortModule } from "@angular/material/sort";
  
@NgModule({
  declarations: 
  [AppComponent, 
  SortOverviewExampleComponent],
  exports: [AppComponent],
  imports:
  [ CommonModule,
    BrowserAnimationsModule,
    BrowserModule,
    MatSortModule,
  ],
  bootstrap: [AppComponent],
})
export class AppModule {}

import { Component, OnInit } from "@angular/core";
import { Sort } from "@angular/material/sort";
  
export interface Student {
  physics: number;
  maths: number;
  chemistry: number;
  name: string;
  roll_number: number;
}
  
@Component({
  selector: "app-sort-overview-example",
  templateUrl: "sort-overview-example.component.html",
  styleUrls: ["./sort-overview-example.component.css"],
})
export class SortOverviewExampleComponent implements OnInit {
  ngOnInit(): void {}
  school: Student[] = [
    { name: "Niall", physics: 91, chemistry: 86, maths: 84, roll_number: 4 },
    { name: "Liam", physics: 73, chemistry: 71, maths: 89, roll_number: 2 },
    { name: "Zayn", physics: 74, chemistry: 91, maths: 99, roll_number: 5 },
    { name: "Harry", physics: 82, chemistry: 80, maths: 92, roll_number: 3 },
    { name: "Louis", physics: 96, chemistry: 76, maths: 93, roll_number: 1 },
  ];
  
  sortedData: Student[];
  
  constructor() {
    this.sortedData = this.school.slice();
  }
  sortData(sort: Sort) {
    const data = this.school.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 "roll_number":
          return compare(a.roll_number, b.roll_number, isAsc);
        case "maths":
          return compare(a.maths, b.maths, isAsc);
        case "physics":
          return compare(a.physics, b.physics, isAsc);
        case "chemistry":
          return compare(a.chemistry, b.chemistry, isAsc);
        default:
          return 0;
      }
    });
  }
}
  
function compare(a: number | string, b: number | string, isAsc: boolean) {
  return (a < b ? -1 : 1) * (isAsc ? 1 : -1);
}

<h1>GeeksforGeeks</h1>
<h3>matSort & mat-sort-header Example</h3>
<table matSort (matSortChange)="sortData($event)">
    <tr>
        <th mat-sort-header="roll_number">Roll No.</th>
        <th mat-sort-header="name">Student Name</th>
        <th mat-sort-header="maths">Mathematics</th>
        <th mat-sort-header="chemistry">Chemistry</th>
        <th mat-sort-header="physics">Physics</th>
    </tr>
    <tr *ngFor="let student of sortedData">
        <td>{{ student.roll_number }}</td>
        <td>{{ student.name }}</td>
        <td>{{ student.maths }}</td>
        <td>{{ student.chemistry }}</td>
        <td>{{ student.physics }}</td>
    </tr>
</table>

h1,
h3 {
  color: green;
  font-family: "Roboto", sans-serif;
  text-align: center;
}
table {
  font-family: "Open Sans", sans-serif;
  margin-left: 50px;
}

<app-sort-overview-example></app-sort-overview-example>

Producción:

Referencia: https://material.angular.io/components/sort/overview