Hey guys, this is more of a question and I apologize for posting it as an issue.
I am using react-table and adding a column that has react bootstrap button:
{ accessor: 'btnBuy', Header: '', width: 95, Cell: row => (
<div>
<Button
bsStyle="success"
bsSize="large"
onClick={this.functionX.bind(this)}>
Click me
</Button>
</div>
)}
...
functionX() {
// need to access row data here
}
My question is, how can I access the row data from functionX? so for example: row.cells[0]..
I couldn't find this in the documentation.
Check the documentation under 'Renderers' all the available objects that are passed to Cell in that single parameter are documented there. It is probably better to call it something other than row because it contains metadata about the row (including the visual row and original row). If you expand your Cell function into a braces wrapper function you can do a console.log to inspect what is passed in.
As far as the onClick is concerned, you need to create an arrow function around that so you can pass in any relevant information from the row parameter.
This type of question is better asked on the #react-table Slack channel (there is a badge at the top of the readme doco page).
Thank you, I didn't know about the slack channel.
Just for info you can do it
{
header: "Edit",
id: "edit",
Cell: ({ row }) => {
return (
<div>
<Link to="#" onClick={ (e) => this.onDeleteClick(row._original) }>Delete</Link>
</div>
)
}
onDeleteClick(item) {
const { _id } = item;
this.props.deleteUser(_id, () => {});
}
Correction
`{
header: "Edit",
id: "edit",
Cell: ({ row }) => {
return (
<div>
<Link to="#" onClick={ (e) => this.onDeleteClick(row.original) }>Delete</Link>
</div>
)
}
onDeleteClick(item) {
const { _id } = item;
this.props.deleteUser(_id, () => {});
}`
Most helpful comment
Just for info you can do it