Using Nested Fields with PrimeReact Datatable's Roweditor

Question

I have been using the editable features of the datatable successfully for a while. However, I am now having issues editing fields where the field is nested.

I can view the value of the field just fine, but editing it isn’t working. With a dropdown, I can select an option but the value stays the same. With text fields, I can’t edit the value at all.

Looking at the logs, when using the drop-down box, if I select an option, and confirm the changes, instead of editing the nested field, the new field value is inserted at the top level of the object (see example below).

I'm trying to change the "properties.status" value from "scheduled" to "complete".

Unaltered

Event: {
id: #####
properties: [
status: "scheduled"
title: "Example"
]
}

New

Event: {
id: #####
properties: [
status: "scheduled"
title: "Example"
]
properties.status: "complete"
}

Datatable:

<DataTable value={loadedEvents} scrollable editMode="row" onRowEditComplete={onRowEditComplete}>
              <Column field="properties.status" header="Status" editor={(options) => statusEditor(options)} />
              <Column rowEditor headerStyle={{ width: '10%', minWidth: '8rem' }} bodyStyle={{ textAlign: 'center' }} />
</DataTable>

Any help to point me in the right direction would be useful and I'm happy to share more of the code if that helps.

Using Nested Fields with PrimeReact Datatable's Roweditor

0 Answers0