Answers

• krittika Posts: 2Questions: 1Answers: 0

  October 2023

  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 Posts: 63,464Questions: 1Answers: 10,466 Site admin

  October 2023

  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