4

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>
Mohit
  • 335
  • 3
  • 10
  • 19

1 Answers1

8

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.

Necip Sunmaz
  • 1,546
  • 17
  • 22