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. After reordering, the column's order will be engine, platform, browser, and grade). It also provides the onColReorder event callback whenever the column gets reordered. Refer to the events section for more details.