ngx-datatable实现滚动及首列首行粘性固定功能方案

核心配置方案 #

ngx-datatable本身提供了内置属性来实现滚动和固定行列，无需额外编写复杂SCSS，直接通过组件属性配置即可解决问题：

1. 开启表格滚动 #

给ngx-datatable添加以下属性，限制表格宽高以触发滚动：

• [scrollbarV]="true"：启用垂直滚动
• [scrollbarH]="true"：启用水平滚动
• [height]="'600px'"：设置表格固定高度（可根据需求调整数值）
• [width]="'100%'"：设置表格宽度，内容超出时触发水平滚动

2. 固定首列 #

给需要固定的首列添加[frozenLeft]="true"属性，示例：

<ngx-datatable-column name="b" prop="ff" [frozenLeft]="true"></ngx-datatable-column>

3. 确保首行（表头）固定 #

ngx-datatable表头默认具备粘性固定特性，若未生效，可添加以下样式增强稳定性：

::ng-deep .ngx-datatable .datatable-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: white;
}

修改后的完整代码 #

<ngx-datatable 
  id="table" 
  #table 
  class="" 
  [rows]="tt"
  [scrollbarV]="true"
  [scrollbarH]="true"
  [height]="'600px'"
  [width]="'100%'"
>
    <ngx-datatable-column name="b" prop="ff" [frozenLeft]="true"></ngx-datatable-column>
    <ngx-datatable-column *ngIf="q" name="Site No" prop="ff"></ngx-datatable-column>
    <ngx-datatable-column name="q" prop="r"></ngx-datatable-column>
    <ngx-datatable-column name="ww" prop="ww">
        <ng-template ngx-datatable-cell-template let-row="row">
            {{ row.qw| currency:'USD':'symbol':'1.2-2' }}
        </ng-template>
    </ngx-datatable-column>
</ngx-datatable>

注意事项 #

• 使用::ng-deep时，确保组件样式隔离模式未设置为ViewEncapsulation.None，避免影响全局样式
• 高度值可根据布局需求调整，例如使用'calc(100vh - 200px)'适配页面剩余空间
• 若需固定多列，给对应列均添加[frozenLeft]="true"属性即可

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