PrimeVue - DataTable duplicate key error on reorderableColumns-CodePudding

I have the below datatable with a strange behavioir:

<DataTable
    :scrollable="true"
    :value="shipments"
    :totalRecords="shipments.length"
    :reorderableColumns="true"
    :alwaysShowPaginator="false"
    :paginator="true"
    :rows="10"
    :resizableColumns="true"
    columnResizeMode="fit"
    sortMode="multiple"
    :stripedRows="true"
    removableSort
    dataKey="reference"
    responsiveLayout="scroll">
    <template #empty> No records found </template>
    <Column field="reference" header="Shipment Number" :sortable="true" frozen />
    <Column header="Shipper" style="text-transform: capitalize">
        <template #body="slotProps">
            {{ slotProps.data.shipper.name.toLocaleLowerCase() }}
        </template>
    </Column>
</DataTable>

If I try to reorder (dragging) the columns, I get the below error. Every time I try to reorder, the reference column is added to the table.

[Vue warn]: Duplicate keys found during update: "reference" Make sure keys are unique.

If I remove this part of the Shipper column:

<template #body="slotProps">
     {{ slotProps.data.shipper.name.toLocaleLowerCase() }}
</template>

And just reference the shipper name using field="shipper.name" it works fine without any errors.

What am I doing wrong?

CodePudding user response：

Reading through the documentation I can see that I missed an important part when using the reorderColumns functionality.

I need to set a columnKey if the specific column doesn't have a field defined as per the docs:

If the column has no field, use columnKey instead as it is mandatory for columns to have unique keys when reordering is enabled.

I added this, and it works now:

<Column header="Shipper" columnKey="shipper" style="text-transform: capitalize">
    <template #body="slotProps">
        {{ slotProps.data.shipper.name.toLocaleLowerCase() }}
    </template>
</Column>