Angular中有两种常用的表格组件：mat-table和cdk-table。下面分别给出它们的使用方法和代码示例。

1. mat-table:

首先，需要确保已经安装了Angular Material和CDK，可以通过以下命令安装：

ng add @angular/material

然后，在需要使用mat-table的模块中引入相关的模块：

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

在HTML模板中使用mat-table：

    
    


  
  
 Name 
    
 {{element.name}} 
  

  
 Age 
    
 {{element.age}} 
  

  
  

  

在组件中定义数据源和列的显示顺序：

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

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

  @ViewChild(MatPaginator) paginator: MatPaginator;
  @ViewChild(MatSort) sort: MatSort;

  ngOnInit() {
    const data = [
      { name: 'John', age: 25 },
      { name: 'Jane', age: 30 },
      // more data...
    ];

    this.dataSource = new MatTableDataSource(data);
    this.dataSource.paginator = this.paginator;
    this.dataSource.sort = this.sort;
  }
}

2. cdk-table:

cdk-table是Angular CDK（Component Dev Kit）中的一个表格组件，提供更灵活的自定义选项。

首先，在需要使用cdk-table的模块中引入相关的模块：

import { CdkTableModule } from '@angular/cdk/table';
import { MatPaginatorModule } from '@angular/material/paginator';
import { MatSortModule } from '@angular/material/sort';

在HTML模板中使用cdk-table：

    
    


  
  
 Name 
    
 {{element.name}} 
  

  
 Age 
    
 {{element.age}} 
  

  
  

  

在组件中定义数据源和列的显示顺序：

import { Component, OnInit, ViewChild } from '@angular/core';
import { DataSource } from '@angular/cdk/table';
import { MatPaginator } from '@angular/material/paginator';
import { MatSort } from '@angular/material/sort';

@Component({
  selector: 'app-table',
  templateUrl: './table.component.html',
  styleUrls: ['./table.component.css']
})
export class TableComponent implements OnInit {
  displayedColumns: string[] = ['