使用粘性标题和水平滚动的MatTable可以通过以下步骤完成:
ng add @angular/material
import { MatTableModule } from '@angular/material/table';
import { MatSortModule } from '@angular/material/sort';
@NgModule({
imports: [
MatTableModule,
MatSortModule
],
...
})
export class AppModule { }
import { MatTableDataSource } from '@angular/material/table';
export class MyComponent {
dataSource: MatTableDataSource;
// 定义表头和数据行
}
import { MatSort } from '@angular/material/sort';
import { ViewChild } from '@angular/core';
export class MyComponent {
@ViewChild(MatSort, { static: true }) sort: MatSort;
ngOnInit() {
this.dataSource.sort = this.sort;
}
}
export class MyComponent {
displayedColumns: string[] = ['column1', 'column2', 'column3'];
dataSource: MatTableDataSource;
ngOnInit() {
// 初始化数据源
this.dataSource = new MatTableDataSource(yourDataArray);
}
}
.table-container {
max-height: 400px;
overflow: auto;
}
th.mat-header-cell {
position: sticky;
top: 0;
background-color: white;
z-index: 1;
}
这些步骤将帮助你实现一个包含粘性标题和水平滚动的MatTable。记得替换你的具体表头和数据行定义,以适应你的实际需求。