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>

please add some more details to your question, codeReview required , for a start add some screenShot or CodePlay for your problem — DevCo
– DevCo, Commented Mar 30, 2022 at 13:35
i have edited the question im new to stack overflow sorry mate. :D — Capitano
– Capitano, Commented Mar 30, 2022 at 13:38
noWorry's welcome to the club, now in regard to your problem , do you want to update values of cell ? — DevCo
– DevCo, Commented Mar 30, 2022 at 13:42
Yes like just a simple update like hardcoded saying the value of the cell is "" for example and with the render part so that it shows the new value fo the cell — Capitano
– Capitano, Commented Mar 30, 2022 at 13:43

DevCo · Accepted Answer · 2022-03-30 16:49:26Z

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

answered Mar 30, 2022 at 16:49

DevCo

4791 gold badge3 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Capitano Over a year ago

Thank you my friend this worked beautifully!!!!

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related