cssangularbootstrap-4sass

Implementing Scroll with Sticky First Column and Row `ngx-datatable`


When the number of rows or columns increases, the content is not fully visible. How to implement a scroll feature, ensuring that the first column and first row remain fixed (sticky) while scrolling?

<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>

I tried SCSS properties like z-index and wrap.


Solution

  • Mohsin please use the below code.

    <!-- begin snippet: js hide: false console: true babel: false babelPresetReact: false babelPresetTS: false -->
    
    
    
          ngAfterViewChecked(): void {
            // Check if the table size has changed,
            if (
              this.table &&
              this.table.recalculate &&
              this.tableWrapper.nativeElement.clientWidth !== this.currentComponentWidth
            ) {
              this.currentComponentWidth = this.tableWrapper.nativeElement.clientWidth;
              this.table.recalculate();
              this.changeDetectorRef.detectChanges();
            }
          }
          @ViewChild(your own datatable reference ) tableWrapper;
          @ViewChild(DatatableComponent) table: DatatableComponent;
    
    <!-- language: lang-css -->
    
    
        th:first-child,td:first-child{
            left: 0;
            z-index: 2;
            position: sticky;
            position: -webkit-sticky;
            background-color: #fff;
        }
        table{
            border-collapse: collapse;
            overflow: scroll;
            }
        thead{
            position: sticky;
            position: -webkit-sticky;
            z-index: 9;
            top: 0;
            left: 0;
            background-color: #fff;
        }