Reordering

Generally, the order of table columns will appear exactly as it is defined within the component. There is an option to reorder the columns using the drag-and-drop feature just by setting the reorderableColumns property to true.

The reordering feature would be written as follows:

<p-dataTable [value]="browsers" reorderableColumns="true">  <p-column field="engine" header="Engine"></p-column>  <p-column field="browser" header="Browser"></p-column>  <p-column field="platform" header="Platform"></p-column>  <p-column field="grade" header="Grade"></p-column></p-dataTable>

The following screenshot shows a snapshot result with a reordering feature as an example:

As per the preceding snapshot, both Platform and Browser column fields are ...

Get Angular UI Development with PrimeNG now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.