CODEWITHSUNDEEP
javascriptangulartypescriptngx-datatable
uma mahesh
uma mahesh

Reputation: 61

How to restrict a column not to be reordered in a table that is created using ngx-datatable but all remaining columns must be reorderable

i am creating some tables using ngx-datatable tool in angular 4. i need one column ie. first column of that table must not be reorderable and all other columns must be orderable. can anybody help me out?

Upvotes: 0

Views: 1323

Answers (1)

wentjun
wentjun

Reputation: 42526

You will need to make use of the draggable input property binding.

I believe on your component.html, your ngx-datatable component looks something like this. For the first ngx-datatable-column you will need to set the draggable property of the first column as false. As for the other columns, you can set draggable as true, though draggable is true by default, hence there is actually no need to specify it.

<ngx-datatable #table class="bootstrap" [columns]="dataColumns">
  <!-- First column is not draggable -->
  <ngx-datatable-column [width]="30" [draggable]="false">
                            ...
  </ngx-datatable-column>
  <!-- The other columns are draggable -->
  <ngx-datatable-column *ngFor="let column of dataColumns| slice:1; let i = index;" name="{{column.name}}" prop="{{column.prop}}" [draggable]="true">
  ...
  </ngx-datatable-column>
</ngx-datatable>

And on your component.ts, you will need to define your dataColumns.

dataColumns = [
    {
      prop: 'id',
      name: 'ID'
    },
    .
    .
    // other column definitions

]

Upvotes: 1

Related Questions