使用粘性第一列和行实现滚动`ngx-datatable`

Question

当行数或列数增加时，内容不完全可见。如何实现滚动功能，确保滚动时第一列和第一行保持固定（粘性）？

<ngx-datatable id="table" #table class="" [rows]="tt">
    <ngx-datatable-column name="b" prop="ff" ></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>

我尝试了

z-index

和

wrap

等 scss 属性。

Answer 1

HTML 结构：

<ngx-datatable
  id="table"
  #table
  [rows]="tt"
  [scrollbarV]="true"
  [scrollbarH]="true"
  [headerHeight]="50"
  [footerHeight]="50"
  [rowHeight]="auto"
  style="overflow: auto; max-height: 400px;">
  
  <ngx-datatable-column name="b" prop="ff" [width]="150" [sticky]="true"></ngx-datatable-column>
  <ngx-datatable-column *ngIf="q" name="Site No" prop="ff" [width]="150"></ngx-datatable-column>
  <ngx-datatable-column name="q" prop="r" [width]="150"></ngx-datatable-column>
  <ngx-datatable-column name="ww" prop="ww" [width]="150">
    <ng-template ngx-datatable-cell-template let-row="row">
      {{ row.qw | currency: 'USD':'symbol':'1.2-2' }}
    </ng-template>
  </ngx-datatable-column>

</ngx-datatable>

粘性列和行的 CSS：

ngx-datatable {
  display: block;
  overflow: auto;
}

ngx-datatable-column.sticky {
  position: sticky;
  left: 0;
  background: white; /* Match your table's background color */
  z-index: 10; /* Ensure it stays on top of other cells */
}

ngx-datatable-header-cell {
  position: sticky;
  top: 0;
  background: white; /* Match your table's background color */
  z-index: 5; /* Ensure it stays on top of rows */
}

• 根据您的布局要求调整最大高度和宽度值。
• 如果您的表有很多行并且您注意到性能问题，请考虑使用 ngx-datatable 内置虚拟滚动功能来实现虚拟滚动。

供您参考： http://swimlane.github.io/ngx-datatable/#pinning

https://github.com/swimlane/ngx-datatable/blob/master/src/app/columns/pinning.component.ts