如何实现PrimeNG表格冻结列的独立滚动？

核心思路 #

PrimeNG默认冻结列会跟随主表同步滚动，要实现独立滚动，需通过自定义CSS修改冻结列容器的滚动行为，并同步主表与冻结列的高度，同时处理表头对齐问题。

具体实现步骤 #

1. 设置表格基础配置 #

确保表格启用滚动和冻结列，设置统一的滚动高度：

<p-table 
  [value]="yourDataSource" 
  scrollHeight="450px" 
  [frozenColumns]="['col1', 'col2']"
>
  <ng-template pTemplate="header">
    <tr>
      <th frozenLeft>列1</th>
      <th frozenLeft>列2</th>
      <th>普通列3</th>
      <th>普通列4</th>
      <!-- 更多普通列 -->
    </tr>
  </ng-template>
  <ng-template pTemplate="body" let-item>
    <tr>
      <td frozenLeft>{{item.col1}}</td>
      <td frozenLeft>{{item.col2}}</td>
      <td>{{item.col3}}</td>
      <td>{{item.col4}}</td>
      <!-- 更多普通列内容 -->
    </tr>
  </ng-template>
</p-table>

2. 添加自定义CSS样式 #

覆盖PrimeNG默认样式，让冻结列容器拥有独立滚动：

/* 左侧冻结列容器设置独立滚动 */
.p-table-frozen-left {
  overflow-y: auto;
  /* 移除默认粘性定位，避免跟随主表滚动 */
  position: relative !important;
}

/* 冻结列表头固定（可选） */
.p-table-frozen-left .p-table-header {
  position: sticky;
  top: 0;
  z-index: 1;
  background-color: #ffffff; /* 与表格表头背景一致 */
}

/* 确保冻结列的表头和内容单元格宽度一致 */
.p-table-frozen-left .p-table-thead > tr > th,
.p-table-frozen-left .p-table-tbody > tr > td {
  width: 180px; /* 根据实际需求调整宽度 */
  min-width: 180px;
}

/* 隐藏冻结列容器的横向滚动（如果不需要） */
.p-table-frozen-left {
  overflow-x: hidden;
}

3. 同步主表与冻结列的高度（可选） #

由于主表和冻结列容器的高度可能因内容差异不一致，可通过Angular代码同步：

import { Component, ViewChild, AfterViewInit } from '@angular/core';
import { Table } from 'primeng/table';

@Component({
  // 组件配置
})
export class YourComponent implements AfterViewInit {
  @ViewChild(Table) table: Table;

  ngAfterViewInit(): void {
    this.syncFrozenColumnHeight();
    // 监听窗口大小变化，重新同步高度
    window.addEventListener('resize', () => this.syncFrozenColumnHeight());
  }

  private syncFrozenColumnHeight(): void {
    const mainScrollBody = this.table.el.nativeElement.querySelector('.p-table-scrollable-body');
    const frozenLeftContainer = this.table.el.nativeElement.querySelector('.p-table-frozen-left');
    
    if (mainScrollBody && frozenLeftContainer) {
      // 同步主表滚动区域高度给冻结列容器
      frozenLeftContainer.style.maxHeight = `${mainScrollBody.offsetHeight}px`;
    }
  }
}

4. 注意事项 #

• 如果使用右侧冻结列，将CSS中的.p-table-frozen-left替换为.p-table-frozen-right即可。
• 若冻结列内容过多导致横向溢出，可调整overflow-x属性为auto，但建议提前设置固定列宽避免此问题。
• 测试不同浏览器的兼容性，部分浏览器对粘性定位和滚动容器的处理可能有差异。

内容的提问来源于stack exchange，提问作者Rohit Mehrotra