Saijo-Shi
Saijo-Shi

Reputation: 1

Primereact Datatable cell edit doesnt work

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

Answers (0)

Related Questions