0

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.

enter image description here

This is the data object that i need to pass to my db endpoint using axios.

Rax22
  • 23
  • 7

0 Answers0