how to update/delete selected rows in v7

[jaekunchoi]

I currently have a onClick function for my selected rows which fires when button is clicked and sends table instance to the function.

I can see instance.selectedFlatRows gives you the rows selected which is fine but how can I delete or update row values?

According to the documentation for useTable and under row properties, it has state but when I look for state object it is undefined for the row object.

The documentation states:
Can be updated via instance.setRowState or the row's setState function.

I also tried instance.setRowState but it is undefined function.

Has this changes for v7? How can I update value or delete row now?

[jaekunchoi]

Nevermind. I enabled useRowState plugin and both functions became available now

[bradleyGamiMarques]

Can you post some code to show how this was implemented? I am currently struggling with this same issue.

I created my own Table component by implementing React Table. It is basically this https://codesandbox.io/embed/github/tannerlinsley/react-table/tree/master/examples/sorting but with my own classes applied to it.

So in the UI I call this table by {data.length > 0 ? <Table columns={columns} data={data} /> : null}
Where columns is defined as

const columns = React.useMemo(
() => [
{
  Header: 'Header1',
  accessor: 'Header1Data',
},
{
  Header: 'Header2;',
  accessor: 'Header2Data',
}),
],
[],
);

And data is defined using state const [data, setData] = useState();

Now what I need to be able to to do is have a third column that has either a delete link or an icon of some sort that when clicked calls a function that removes that item from the table.

I was trying to implement this solution here: https://stackoverflow.com/questions/53030706/delete-particular-item-in-react-table but it can't read the state value from the parent component that is rendering the table. When I do a console log of the state value, data, inside of the onClick function. I get an empty array which shouldn't be possible since the table wouldn't render unless there was data in that state.

In summary, I need to update my table based on the parent component's state. When a button in a table column is clicked update parent state which should update the table.

I would really appreciate any help you could give here.

[bradleyGamiMarques]

My problem was solved! I posted my answer and experience in the linked stack overflow post.

[cadupedroni]

An example of how to delete a particular item from the table
Delete Item in React-Table

[NahidEydi]

gjcgcji