Creating a sum column from editable cells in React Table v7

Sometimes you need to create materialized columns from other columns in React Table. Here is how!

[riongull]

Thanks for answering my question with this video, Tanner.

Key takeaways:
1. The `accessor` property on column objects (in the `columns` array of the table options) can be a function (which is stated in the docs, but none of the codesandbox examples show this usage - they all use strings). This function will be called with each row in the table, i.e. (row) => { /* do stuff with the row object, like calculate a rowSum */ return }.
2. Using `accessor`s puts returned values into the table state (e.g. tableInstance.rows[0].values will include a property defined by your accessor). Using a `Cell` property on column objects does NOT put values into state.


I noticed that you/Tanner didn't put an `id` on the accessor, but the documentation (now that I've read that part) says it's *required*. It looks like it defaulted to the "Header" name (in this example "Total score"). I fiddled around with the codesandbox example and saw that if you put an `id` prop on the column it will use that name instead.

[ravenred]

Hello, I just found this but the codesandbox shows this error: Invalid attempt to destructure non-iterable instance.
In order to be iterable, non-array objects must have a [Symbol.iterator]() method.

[manobalaselvaraj]

Hi Tanner, May i know when you will live stream again, I''m waiting ... having lot's of

[mamadidiarrisso]

hello
i have one problem e i want to my row inside put a link, what i do da ? please i am beginners