Can someone assist me with updating a record in the database through the front-end table display? Here is a screenshot for reference: https://i.stack.imgur.com/CPLN6.png
I need the entire record to be updated in the backend once I click the save button on the displayed record. Below is the code snippet:
export default function AdminXnaLog() {
const [data, setData] = useState([]); //table data
var columns = [
{title: "id", field: "_id", hidden: true},
{title: "Member No", field: "memberno"},
{title: "Name", field: "name"},
{title: "Surname", field: "surname"},
{title: "XNA Description", field: "description"},
{title: "XNA Withdraw", field: "xnawithdraw"},
{title: "XNA Deposit", field: "xnadeposit"},
{title: "XNA Balance", field: "balance"},
{title: "Date", field: "date"}
]
useEffect(() => {
async function fetchBooks() {
const response = await fetch('/xnalogget');
const json = await response.json();
setData(json.xl);
console.log(json.xl)
}
fetchBooks();
},[]);
return (
<MaterialTable
title="XNA Logs"
columns={columns}
data={data}
editable={{
onRowUpdate: ()=>handleRowUpdate()
}}
/>
)
}
I am struggling to implement the handleRowUpdate function. Is there a way I can pass the current row id and updated data to the PUT API in the backend for updating? The backend should locate the row by id and update the corresponding database record.