Reputation: 1
I have a data table, where i'd like to edit cells in one of the columns with axios put request. In fact i have such a situation: data is coming to my express js backend but it doesnt render on frontend (i have an axios get request for this and every data renders well exept column that i am trying to edit.
Here is my table
<DataTable
editMode="cell"
rowClassName={rowClass}
selectionMode="single"
onContextMenu={(e) => cm.current?.show(e.originalEvent)}
contextMenuSelection={selectedDocument}
onContextMenuSelectionChange={(e) => setSelectedDocument(e.value)}
value={documents}
expandedRows={expandedRows}
onRowToggle={(e) => setExpandedRows(e.data)}
rowExpansionTemplate={rowExpansionTemplate}
dataKey="id" header={header}
tableStyle={{ minWidth: '60rem' }}>
<Column expander={allowExpansion} />
<Column field="docType" sortable />
<Column field="docNumber" sortable />
<Column field="docDate" sortable />
<Column field="creationDate" sortable />
<Column field="shortContent" sortable />
<Column field="filesTotal" sortable />
<Column field="comment" editor={(options) => textEditor(options)}
onCellEditComplete={onCellEditComplete}/>
</DataTable>
const textEditor = (options: ColumnEditorOptions) => {
return <InputText type="text" value={options.value} onChange={(e: React.ChangeEvent<HTMLInputElement>) => options.editorCallback!(e.target.value)} onKeyDown={(e) => e.stopPropagation()} />;
};
Here is put request
const onCellEditComplete = async (e:ColumnEvent) => {
let { rowData, newValue, field, originalEvent: event } = e;
try {
const response = await cellEditApi(e.rowData as DocumentListItemDto);
console.log(response.data)
switch (field) {
case 'comment':
if ((newValue)) rowData[field] = newValue;
else event.preventDefault();
break;}
} catch (error) {
console.error("Error error while adding a comment:", error);
}
};
Express js
app.put('/api/documents/:id', cors(corsOptions), (req, res) => {
const documentValue = req.body;
const idGroup = documents.documents.find((elem) => elem.id === Number.parseInt(req.params.id))
const arr = documents;
const index = arr.documents.indexOf(idGroup)
if (index !== -1) {
arr[index] = documentValue;
}
console.log('Received PUT data:', documentValue);
res.send('Got a PUT request for docements id: ' + req.params.id)
console.log(req.params.id, documents)
})
API
cellEdit: ( data: DocumentListItemDto) => {
return axiosInstance.put(`/documents/${data.id}`, data);
}
DTO
export class DocumentListItemDto {
public id: number = 0;
public docType: string = "";
public docNumber: string = "";
public docDate: string = "";
public creationDate: string = "";
public shortContent: string = "";
public filesTotal: number = 0;
public comment: string = "";
public marked: string = "";
public insertions: Array<DocumentInsertion> = [];
}
I think i have some mistakes in using cell edit options in Primereact library. Thanks a lot to everyone who can help. Why it dont want to render edited cells?
Upvotes: 0
Views: 40