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 mutually reordered (that is, the initial column order is engine, browser, platform, and grade...