Editablecell - Using updateMyData to send updates to my database

[Derick80]

Hi everyone -- Beginner ish here.
Overview: I'm trying to use the editable cell example in my application to update data in my database. I am able to retrieve and display the initial data. Cells are editable. I'm following this example. My 'real' db has many more entries but it was a lot to look at so I broke it down into something easier to see and maybe understand (hah).

Stack: Next.js, Prisma, postgres db.
I struggled with posting all the code b/c it's a lot but here we are. --May cross post to stackoverflow.

Problem: but I'm having a hard time wrapping my head around how I can modify the updateMyData function to update my database.

So I'm guessing that I need to modify updateMyData and/or create a new function for updating the data through prismaClient. My efforts haven't been successful and although I know setData is where it's supposed to be I do not think I understand what's going on with the mapping in setData. I have looked deeper into the react-table code but at this point in my understanding it's over my head.

Thanks in advance and let me know if I can clarify anything -- happy to do that.

Function I'm focusing on:

const updateMyData = async (rowIndex, columnId, value) => {
    // We also turn on the flag to not reset the page
    setSkipPageReset(true)
    setData((old) =>
      old.map((row, index) => {
        if (index === rowIndex) {
          return {
            ...old[rowIndex],
            [columnId]: value,
          }
        }
        return row
      })
    )
  }
 // We'll only update the external data when the input is blurred
  const onBlur = () => {
    updateMyData(index, id, value)
  }

My code

//for reference here are the props I use
export type TransactionProps = {
  id: number
  description: string
  cost: number
}
type Props = {
  data: TransactionProps[]
}

import React from 'react'
import styled from 'styled-components'
import { GetStaticProps } from 'next'
import Table from './Table'
import { TransactionProps } from '../../components/Transaction'
import prisma from '../../lib/prisma'
   //left out styles
export const getStaticProps: GetStaticProps = async () => {
  const data = await prisma.transaction.findMany()
  return {
    props: { data },
  }
}

const RTable: React.FunctionComponent<Props> = (props: Props) => {
  const [data, setData] = React.useState(props.data)
  const [originalData] = React.useState(data)
  const [skipPageReset, setSkipPageReset] = React.useState(false)
  const columns = React.useMemo(
    () => [
      {
        Header: 'Summary',
        columns: [
          {
            Header: 'Description',
            accessor: 'description',
          },
          {
            Header: 'Cost',
            accessor: 'cost',
          },
        ],
      },
    ],
    []
  )

  // When our cell renderer calls updateMyData, we'll use
  // the rowIndex, columnId and new value to update the
  // original data
  const updateMyData = async (rowIndex, columnId, value) => {
    // We also turn on the flag to not reset the page
    setSkipPageReset(true)
    setData((old) =>
      old.map((row, index) => {
        if (index === rowIndex) {
          return {
            ...old[rowIndex],
            [columnId]: value,
          }
        }
        return row
      })
    )
  }
  console.log(updateMyData)
  // After data changes, we turn the flag back off
  // so that if data actually changes when we're not
  // editing it, the page is reset
  React.useEffect(() => {
    setSkipPageReset(false)
  }, [data])

  // Let's add a data resetter/randomizer to help
  // illustrate that flow...
  const resetData = () => setData(originalData)

  return (
         <button onClick={resetData}>Reset Data</button>
      <Table
        columns={columns}
        data={data}
        updateMyData={updateMyData}
        skipPageReset={skipPageReset}
      />
    )
}

export default RTable

import React from 'react'
import { useTable, usePagination } from 'react-table'
import { TransactionProps } from '../../components/Transaction'
import prisma from '../../lib/prisma'

// Create an editable cell renderer
const EditableCell = ({
  value: initialValue,
  row: { index },
  column: { id },
  updateMyData, // This is a custom function that we supplied to our table instance
}) => {
  // We need to keep and update the state of the cell normally
  const [value, setValue] = React.useState(initialValue)

  const onChange = (e) => {
    setValue(e.target.value)
  }

  // We'll only update the external data when the input is blurred
  const onBlur = () => {
    updateMyData(index, id, value)
  }

  // If the initialValue is changed external, sync it up with our state
  React.useEffect(() => {
    setValue(initialValue)
  }, [initialValue])

  return <input value={value} onChange={onChange} onBlur={onBlur} />
}

// Set our editable cell renderer as the default Cell renderer
const defaultColumn = {
  Cell: EditableCell,
}

// Be sure to pass our updateMyData and the skipPageReset option
const Table = ({ columns, data, updateMyData, skipPageReset }) => {
  // For this example, we're using pagination to illustrate how to stop
  // the current page from resetting when our data changes
  // Otherwise, nothing is different here.
  const {
    getTableProps,
    getTableBodyProps,
    headerGroups,
    prepareRow,
    page,
    canPreviousPage,
    canNextPage,
    pageOptions,
    pageCount,
    gotoPage,
    nextPage,
    previousPage,
    setPageSize,
    state: { pageIndex, pageSize },
  } = useTable(
    {
      columns,
      data,
      defaultColumn,
      // use the skipPageReset option to disable page resetting temporarily
      autoResetPage: !skipPageReset,
      // updateMyData isn't part of the API, but
      // anything we put into these options will
      // automatically be available on the instance.
      // That way we can call this function from our
      // cell renderer!
      updateMyData,
    },
    usePagination
  )

  // Render the UI for your table
  return (
    <>
      <table {...getTableProps()}>
        <thead>
          {headerGroups.map((headerGroup) => (
            <tr {...headerGroup.getHeaderGroupProps()}>
              {headerGroup.headers.map((column) => (
                <th {...column.getHeaderProps()}>{column.render('Header')}</th>
              ))}
            </tr>
          ))}
        </thead>
        <tbody {...getTableBodyProps()}>
          {page.map((row, i) => {
            prepareRow(row)
            return (
              <tr {...row.getRowProps()}>
                {row.cells.map((cell) => {
                  return <td {...cell.getCellProps()}>{cell.render('Cell')}</td>
                })}
              </tr>
            )
          })}
        </tbody>
      </table>
      <div className='pagination'>
        <button onClick={() => gotoPage(0)} disabled={!canPreviousPage}>
          {'<<'}
        </button>{' '}
        <button onClick={() => previousPage()} disabled={!canPreviousPage}>
          {'<'}
        </button>{' '}
        <button onClick={() => nextPage()} disabled={!canNextPage}>
          {'>'}
        </button>{' '}
        <button onClick={() => gotoPage(pageCount - 1)} disabled={!canNextPage}>
          {'>>'}
        </button>{' '}
        <span>
          Page{' '}
          <strong>
            {pageIndex + 1} of {pageOptions.length}
          </strong>{' '}
        </span>
        <span>
          | Go to page:{' '}
          <input
            type='number'
            defaultValue={pageIndex + 1}
            onChange={(e) => {
              const page = e.target.value ? Number(e.target.value) - 1 : 0
              gotoPage(page)
            }}
            style={{ width: '100px' }}
          />
        </span>{' '}
        <select
          value={pageSize}
          onChange={(e) => {
            setPageSize(Number(e.target.value))
          }}
        >
          {[10, 20, 30, 40, 50].map((pageSize) => (
            <option key={pageSize} value={pageSize}>
              Show {pageSize}
            </option>
          ))}
        </select>
      </div>
    </>
  )
}

export default Table

[calebrussel77]

Hi @DCH1980 ! i have face the same problem.

To achieve this, you can :

1- In your column array that you pass into react table you need to create a button who's onClick function takes a callback to edit your data to add an isEditing: true - so you will handle turning the row to edit mode from outside of the table.
function to set the table data with 'isEditing' property :

const handleClickEditRow = (rowIndex) => {
    setDatas((prev) =>
      prev.map((r, index) => ({ ...r, isEditing: rowIndex === index }))
    );
  };

2-In your column you have to use it like this in your edit action button

      {
        Header: "",
        accessor: "id",
        Cell: (props) => {
    const rowIdx = props.value?.toString();
          return (
            <div className=" flex space-x-3 items-center justify-end">
              {props.row.original.isEditing && (
                <button
                  className="focus:outline-none"
                  title="Validate the modification"
                  type="submit"
                  onClick={() => submitEditedData(props.row.original, rowIdx )}
                >
                  <CheckIcon className="h-5 w-5 cursor-pointer text-green-500" />
                </button>
              )}
              {!props.row.original.isEditing && (
                <button
                  className="focus:outline-none"
                  title="Edit the ligne"
                  onClick={() => handleClickEditRow(props.row.index)}
                >
                  <PencilAltIcon className="h-5 w-5 cursor-pointer" />
                </button>
              )}
            </div>
          );
        },
      },

3- Create a submitEditedData function where you can have submit edited data :

  const submitEditedData = (rowData, rowIndex) => {
   //here you can have all the edited data on the rowData object, and you can do your api call to submit these data.
  console.log(rowData);

  //Here you have to set the isEditing to false to turn off editing mode after your api call
    handleClickEditRow(rowIndex);
  };