How can i edit a react-table input (React.js)

Question

Hello fellow programmers.

Im new to react and i am trying to Update data inside react-table table.

I want to update the data in a particular cell with an onClick() event

following is my code snippet for code reference

return (
    <div>
        <table {...getTableProps()} style={{ border: 'solid 1px blue' }}>
        <thead>
            {headerGroups.map(headerGroup => (
            <tr {...headerGroup.getHeaderGroupProps()}>
                {headerGroup.headers.map(column => (
                <th
                    {...column.getHeaderProps()}>
                    {column.render('Header')}
                </th>
                ))}
            </tr>
            ))}
        </thead>
        <tbody {...getTableBodyProps()}>
            {rows.map(row => {
            prepareRow(row)
            return (
                <tr {...row.getRowProps()}>
                {row.cells.map(cell => {
                    return (
                    <td
                        {...cell.getCellProps()} onClick={() => console.log(cell.value)} >
                        {cell.render('Cell')}
                    </td>
                    )
                })}
                </tr>
            )
            })}
        </tbody>
        </table>

Answer 1

if you want to make the table editable > you can try with following example , its self explanatory in their official docs.. check if it can help

https://codesandbox.io/s/github/tannerlinsley/react-table/tree/v7/examples/editable-data?file=/src/App.js:6709-6714