Primevue Datatable Column Order Position

Question

I'm trying to create a Datatable with PrimeVue 4 and enable the Column Reorder feature. So far I have succeeded doing it. After that I want to save the column order to database, but I can't figured out how to get the current column position after user drag and drop the column. I tried to read the documentation on Primevue and searching the internet but can't find any example. Anyone can help me?

<DataTable :value="list_price" :reorderableColumns="true" tableStyle="min-width: 50rem">
    <Column v-for="col of columnSet" :key="(col as any).FIELD_NAME" :field="(col as any).FIELD_NAME" :header="(col as any).FIELD_HEADER"></Column>
</DataTable>

Note: I'm using Composition API

Answer 1

The DataTable component has state you can access, including the current column order.

Add a ref to the component:

<DataTable ref="table" :value="list_price" reorderableColumns />

import { ref } from 'vue'
const table = ref()

The column order is d_columnOrder, which you can access at any time after the component has mounted, e.g. when a column is reordered using the column-reorder event

<DataTable 
  ref="table"
  :value="list_price"
  reorderableColumns
  @column-reorder="reorder" 
/>

function reorder() {
  console.log(table.value.d_columnOrder)
}