Unable to reorder columns in angular ngx-datatable

Question

I am working on angular ngx-datatables, where I need to achieve its column reorder functionality. But its not working(not getting any error), also column's width is not changing on dragging the line.

I have added below css files in angular.json file. Do it require any js file?

• "node_modules/@swimlane/ngx-datatable/release/components/datatable.component.css",

• "node_modules/@swimlane/ngx-datatable/release/themes/material.css",

• "node_modules/@swimlane/ngx-datatable/release/themes/dark.css",

• "node_modules/@swimlane/ngx-datatable/release/assets/icons.css"

I am following this link.

     @Component({
          selector: 'app-my-component',
          styles: [`
            .icon {
              position:absolute;
            }
            .datatable-icon-down {
              top: 0px;
            }
            .datatable-icon-up {
              top: 40px;
            }
            .dragFromLeft .icon {
              left:-13px;
            }
          `],
          template: `
        <div>
            <ngx-datatable 
              class="material"
              [rows]="rows"      
              [columnMode]="'force'"
              [headerHeight]="50"
              [footerHeight]="50"
              [rowHeight]="'auto'"
              [externalPaging]="true"
              [externalSorting]="true"
              [count]="page.count"
              [offset]="page.offset"
              [limit]="page.limit"
              [sortType]="'single'"
              (page)="pageCallback($event)"
              (sort)="sortCallback($event)"
              [reorderable]="reorderable"
              [swapColumns]="swapColumns"
              [targetMarkerTemplate]="targetMarkerTemplate"
              [loadingIndicator]="loadingIndicator" >
        <ngx-datatable-column 
                    *ngFor="let col of columns" 
                    [name]="col.name" [prop]="col.prop">
                  </ngx-datatable-column>

            </ngx-datatable>
             <ng-template #targetMarkerTemplate let-class="class">
                <div [ngClass]="class">
                  <div class="icon datatable-icon-down"></div>
                  <div class="icon datatable-icon-up"></div>
                </div>
              </ng-template>
             <div class='selected-column'>
                <h4>Available Columns</h4>
                <ul>
                  <li *ngFor='let col of allcolumns'>
                    <input
                      type='checkbox'
                      [id]="col.name"
                      (click)='toggle(col)'
                      [checked]='isChecked(col)'
                    />
                    <label [attr.for]="col.name">{{col.name}}</label>
                  </li>
                </ul>
              </div>
            </div>
          `
        })
        export class NGXServerSide implements OnInit {
          rows: Object[] = [];
          loadingIndicator: boolean = false;
          reorderable: boolean = true;
          swapColumns: boolean = false;
          columns = [
        { name: 'EmployeeId', prop: 'EmployeeId' },
        { name: 'Name', prop: 'Name' },
        { name: 'City', prop: 'City' },
        { name: 'Department', prop: 'Department', sortable: false  },
        { name: 'Gender', prop: 'Gender', sortable: false },
      ];      
 allcolumns = [
    { name: 'EmployeeId', prop: 'EmployeeId' },
    { name: 'Name', prop: 'Name' },
    { name: 'City', prop: 'City' },
    { name: 'Department', prop: 'Department', sortable: false },
    { name: 'Gender', prop: 'Gender', sortable: false },
  ]