Primevue data table input edit style

Question

Prime vue Datatable edit input active by default

I prime data table for inserting a value for the table with input on the table but the input become active when I click it how can I make the visible by default.

this is my table

<DataTable :value="lookupLabResults" editMode="cell">
              <template #header>{{selectedExamination.description}}</template>
              <Column header="Result" field="result">
                <template #editor="slotProps">
                  <InputText
                    autofocus
                    v-model="slotProps.data[slotProps.column.field]"
                    @click.stop="[onResultFocus(slotProps),toggle($event)]"
                  />
                </template>
              </Column>
              <Column header="Name" field="name" />
              <Column header="L/H" field />
              <Column header="Range from" field="referenceRangeFrom" />
              <Column header="Range to" field="referenceRangeTo" />
              <Column header="Range panic" field="referenceRangePanic" />
              <Column header="Unit" field="unit" />
              <Column header="Remark" field="remark">
                <template #editor="slotProps">
                  <InputText v-model="slotProps.data[slotProps.column.field]" />
                </template>
              </Column>
  </DataTable>

Answer 1

I've searched everywhere for this and was unable to find an integrated solution. I needed it to always be editable if it was new data.

What I did to solve this was:

<Column header="Remark" field="remark">
  <template #body="{data, field}">
    <InputText id="BODY" v-if="isNew" v-model="data[field]"/>

    <span v-else>{{data[field]}}</span>
  </template>

  <template #editor="{data, field}">
    <InputText id="EDITOR" v-model="data[field]"/>
  </template>
</Column>

You're going to need both, a #body and an #editor.
You can check by looking at the inspector and looking at the id value of the input that shows up to better understand it.

Basically what will happen is:

Existing data:
Not editing: will show span from #body
Editing: will show #editor

New data:
Not editing: will show InputText from #body
Editing: will show #editor