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
.
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;
}