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.

Share:
10,937
Mohit
Author by

Mohit

Updated on June 24, 2022

Comments

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