How to scroll the horizontal scroll bar when drag the column of ngx-datatable,Angular4
10,937
Required this two property
[scrollbarV]="true" [scrollbarH]="true"
and add your component css or global style.css this class:
.material {
height: 550px
}
"material" is your ngx-datatable class if you want change it.
Author by
Mohit
Updated on June 24, 2022Comments
-
Mohit about 2 years
I am trying to scroll horizontal scroll bar when drag the column header of ngx-datatable.I am using Angular4.In my ngx-datatable there is horizontal scrollbar ,When I drag the first column from left to right ,then the horizontal scroll bar should move.How can I make horizontal scroll bar move when I drag the column of ngx-datatable from left to right. Please help me
<ngx-datatable class="material" [rows]="row" [columnMode]="'force'" [headerHeight]="50" [footerHeight]="50" [reorderable]="true" [scrollbarV]="true" [scrollbarH]="true" > <ngx-datatable-column name="Name" [minWidth]="150" [resizeable]="true"> <ng-template let-column="column" ngx-datatable-header-template > Name </ng-template> <ng-template let-row="row" let-value="value" ngx-datatable-cell-template > <div> {{row['Name']}} </div> </ng-template> </ngx-datatable-column> <ngx-datatable-column name="Address" [minWidth]="150" [resizeable]="true"> <ng-template let-column="column" ngx-datatable-header-template > Address </ng-template> <ng-template let-row="row" let-value="value" ngx-datatable-cell-template > <div> {{row['Address']}} </div> </ng-template> </ngx-datatable-column> <ngx-datatable-column name="Age" [minWidth]="150" [resizeable]="true"> <ng-template let-column="column" ngx-datatable-header-template > Age </ng-template> <ng-template let-row="row" let-value="value" ngx-datatable-cell-template > <div> {{row['Age']}} </div> </ng-template> </ngx-datatable-column> </ngx-datatable>