在angular2中查找可排序的表

npm install @angular/material @angular/cdk

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

<table mat-table [dataSource]="dataSource" matSort>
  <!-- 表格列定义 -->
  <ng-container matColumnDef="column1">
    <th mat-header-cell *matHeaderCellDef mat-sort-header>列1</th>
    <td mat-cell *matCellDef="let element">{{element.column1}}</td>
  </ng-container>

  <ng-container matColumnDef="column2">
    <th mat-header-cell *matHeaderCellDef mat-sort-header>列2</th>
    <td mat-cell *matCellDef="let element">{{element.column2}}</td>
  </ng-container>

  <!-- 其他列定义... -->

  <!-- 表格行定义 -->
  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>

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

@Component({
  selector: 'app-table',
  templateUrl: './table.component.html',
  styleUrls: ['./table.component.css']
})
export class TableComponent implements OnInit {
  dataSource: MatTableDataSource<any>;
  displayedColumns: string[] = ['column1', 'column2'];

  @ViewChild(MatSort) sort: MatSort;

  ngOnInit() {
    // 初始化数据源
    this.dataSource = new MatTableDataSource(yourDataArray);

    // 设置排序
    this.dataSource.sort = this.sort;
  }
}