jquery.dataTables.mjs:5959 Uncaught (in promise) TypeError: Cannot read properties of undefined (rea

krittika

Link to test case:
Debugger code (debug.datatables.net):
Error messages shown:
Description of problem:

krittika

geeting this issue in vue js 3

<DataTable v-model:editingRows="editingRows" :value="products" editMode="row" dataKey="id"
@row-edit-save="onRowEditSave" tableClass="editable-cells-table" tableStyle="min-width: 50rem">
<Column field="code" header="Code" style="width: 20%">
<template #editor="{ data, field }">
<InputText v-model="data[field]" />
</template>
</Column>
<Column field="name" header="Name" style="width: 20%">
<template #editor="{ data, field }">
<InputText v-model="data[field]" />
</template>
</Column>
<Column field="inventoryStatus" header="Status" style="width: 20%">
<template #editor="{ data, field }">
<Dropdown v-model="data[field]" :options="statuses" optionLabel="label" optionValue="value" placeholder="Select a Status">
<template #option="slotProps">
<Tag :value="slotProps.option.value" :severity="getStatusLabel(slotProps.option.value)" />
</template>
</Dropdown>
</template>
<template #body="slotProps">
<Tag :value="slotProps.data.inventoryStatus" :severity="getStatusLabel(slotProps.data.inventoryStatus)" />
</template>
</Column>
<Column field="price" header="Price" style="width: 20%">
<template #body="{ data, field }">
{{ formatCurrency(data[field]) }}
</template>
<template #editor="{ data, field }">
<InputNumber v-model="data[field]" mode="currency" currency="USD" locale="en-US" />
</template>
</Column>
<Column :rowEditor="true" style="width: 10%; min-width: 8rem" bodyStyle="text-align:center"></Column>
</DataTable>

allan

Is this with datatables.net-vue3? We don't have a Column component.

Can you please link to a test case showing the issue, per the template text you ignored in the initial post?

Thanks,
Allan