set reorderableColumn property to specific column of primeng datatable angular 2

Question

<p-dataTable [value]="cars" reorderableColumns="true">
  <p-column field="vin" header="Vin"></p-column>
  <p-column field="year" header="Year"></p-column>
  <p-column field="brand" header="Brand"></p-column>
  <p-column field="color" header="Color"></p-column>
</p-dataTable>

In above code, I don't want to allow reordering to column "color".(Want to set reorderableColumns="false" to "color" column).

Anyone having any solution??

score 1 · Accepted Answer · answered Jan 11 '18 at 07:06

Currently there is no support of selected column ordering in primeng datatable. A callback onColReorder() is provided by primeng that only invoke after the completion of ordering.

If you want to achieve this kind of functionality then you can try the following patch code.

<div style="width:75%;float:left">
    <p-dataTable [value]="cars" reorderableColumns="true">
        <p-column field="vin" header="Vin"></p-column>
        <p-column field="year" header="Year"></p-column>
        <p-column field="brand" header="Brand"></p-column>
    </p-dataTable>
</div>
<div style="width:25%;float:left">
    <p-dataTable [value]="cars">
        <p-column field="color" header="Color"></p-column>
    </p-dataTable>
</div>

New p-table aka TurboTable has this easy by adding pReorderableColumn to the columns that you want. — Cagatay Civici, Jan 21 '18 at 18:47

score 0 · Answer 2 · answered Jul 11 '18 at 11:04

Try using pReorderableColumnDisabled attribute to what ever column you dont want to reorder.

<p-dataTable [value]="cars" reorderableColumns="true">
     <p-column field="vin" header="Vin"></p-column>
     <p-column field="year" header="Year"></p-column>
     <p-column field="brand" header="Brand"></p-column>
     <p-column field="color" header="Color" [pReorderableColumnDisabled]="true"></p-column>
</p-dataTable>

Happy Coding :)

set reorderableColumn property to specific column of primeng datatable angular 2

2 Answers2