如何固定ngx-datatable表头实现内容滚动？附代码示例

我看了你要实现表头固定+内容可滚动的需求，结合你提供的代码，这里给你梳理关键调整点和完整的解决方案：

核心配置思路 #

要实现这个效果，关键是让ngx-datatable启用虚拟滚动模式，同时给表格设置明确的高度约束——这样内容区域超出高度后会自动滚动，表头会默认固定在顶部。

修改后的完整代码 #

HTML部分 #

<!-- 外层容器设置固定高度，让表格内容有滚动边界 -->
<div class="qr-table-wrapper" style="height: 550px; overflow: hidden;">
  <ngx-datatable 
    [rows]="qrCodes" 
    class="material qr-list-table" 
    [columnMode]="'force'" 
    [rowHeight]="'auto'" 
    [limit]="10" 
    [count]="qrCodes.length" <!-- 用数据实际长度替代固定值，适配动态数据 -->
    [selected]="selected" 
    [selectAllRowsOnPage]="false" 
    [displayCheck]="displayCheck" 
    (activate)="onActivate($event)" 
    (select)="onSelect($event)" 
    [scrollbarV]="true" 
    [scrollbarH]="false" 
    [selectionType]="SelectionType.checkbox" 
    (mouseover)="getMouseOver()" 
    (mouseleave)="getMouseLeave()"
    [virtualization]="true" <!-- 开启虚拟滚动，这是表头固定的核心开关 -->
    [headerHeight]="50" <!-- 明确表头高度，避免自适应导致的布局偏移 -->
  >
    <!-- 选择列 -->
    <ngx-datatable-column 
      [headerCheckboxable]="true" 
      [checkboxable]="true"
    >
    </ngx-datatable-column>

    <!-- 二维码名称列 -->
    <ngx-datatable-column prop="name">
      <ng-template ngx-datatable-header-template> Name of QR Code </ng-template>
      <ng-template ngx-datatable-cell-template let-row="row" let-value="value">
        <div class="row qr-info"> {{row.name}} </div>
      </ng-template>
    </ngx-datatable-column>

    <!-- 二维码类型列 -->
    <ngx-datatable-column prop="created">
      <ng-template ngx-datatable-header-template> QR Type </ng-template>
      <ng-template ngx-datatable-cell-template let-row="row">
        <!-- 修正了ngIf的位置和插值表达式的语法错误 -->
        <span *ngIf="isHoverButtonVisible">{{row?.qr_type_display}}</span>
      </ng-template>
    </ngx-datatable-column>
  </ngx-datatable>
</div>

TS部分（补充优化） #

如果你的数据是异步加载的，建议调整为异步赋值逻辑，避免初始空数据导致的异常：

ngOnInit() {
  // 同步数据保持原有代码即可
  this.qrCodes = this.qrCodeService.qrCodes;

  // 如果是异步请求数据，替换为以下逻辑
  // this.qrCodeService.fetchQrCodes().subscribe(res => {
  //   this.qrCodes = res;
  // });
}

关键调整说明 #

1. 添加高度约束容器：给表格套一个固定高度的外层容器，这是触发内容滚动的前提——没有明确高度，表格会自适应撑满所有内容，不会出现滚动条。
2. 开启虚拟滚动：新增[virtualization]="true"配置，这是ngx-datatable实现表头固定的核心，虚拟滚动模式下表头会自动固定在顶部。
3. 修正语法错误：你原代码里的单元格模板存在两处问题：ngIf写在了ng-template标签上（应该放在模板内的元素上），以及插值表达式多了一个}，已经一并修正。
4. 动态计数：把[count]="10"改成[count]="qrCodes.length"，让分页计数和实际数据量匹配，避免逻辑冲突。

可选样式优化 #

如果表头出现偏移或者被内容遮挡的情况，可以添加以下自定义CSS：

.qr-table-wrapper .ngx-datatable .datatable-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background-color: #ffffff; /* 确保表头背景不透明，盖住下方滚动的内容 */
  border-bottom: 1px solid #e0e0e0;
}

这样调整后，你的表格就能实现和参考示例一致的表头固定、内容垂直滚动效果了。

内容的提问来源于stack exchange，提问作者Ayushi Verma