I am making a table where it allows users to edit the data in the react table. I used React Table v7 of Tanstack. So far, I have made it to the point of my use cases except sending/post/pass/submit the data edited by the user to my database API endpoint using the Axios library.
//Main
function EnhancedTableTarget ({ columns, data, updateMyData }) {
// Use the state and functions returned from useTable to build your UI
const [editableRowIndex, setEditableRowIndex] = React.useState(null);
const {
getTableProps,
getTableBodyProps,
headerGroups,
rows,
prepareRow,
//Global Filter
setGlobalFilter,
//Pagination
page,
gotoPage,
setPageSize,
//States here
state: { globalFilter, pageIndex, pageSize },
} = useTable({
columns,
data,
// defaultColumn,
updateMyData,
editableRowIndex,
setEditableRowIndex, // setState hook for toggling edit on/off switch
initialState: { globalFilter: '', pageIndex: 0,},
},
useGlobalFilter,
usePagination,
(hooks) => {
hooks.allColumns.push((columns) => [
// other hooks such as selection hook
...columns,
// edit hook
{
accessor: "edit",
id: "edit",
Header: "Actions",
Cell: ({ row, setEditableRowIndex, editableRowIndex }) => (
<button
className="action-button"
onClick={() => {
const currentIndex = row.index;
if (editableRowIndex !== currentIndex) {
// row requested for edit access
setEditableRowIndex(currentIndex);
} else {
// request for saving the updated row
setEditableRowIndex(null); // keep the row closed for editing after we finish updating it
const updatedRow = row.values;
console.log("updated row values:");
console.log(updatedRow);
// call your updateRow API
//Insert here the api put
}
}}
>
{/* single action button supporting 2 modes */}
{editableRowIndex !== row.index ? "Edit" : "Save"}
</button>
)
}
]);
}
)
In my code, I have created(with the help of the community) an editable row that allows the user to edit the row and also saves it but I don't know how to submit/post/put this row edited data using Axios. Hoping you experienced dev can give insights on how I can solve this problem.
This is the data object that i need to pass to my db endpoint using axios.