React-table: How to access to another column's value from a column
I have a column named "Status" and another column named "Action"
Under default situation, all action will be "edit"
However when status is "canceled" action should become "delete".
How can i make this?
jingyao97
All 2 comments
you can access the entire row's data via the Cell property in the columns. You'd basically just conditionally render what you want based on the value of the other column, or track it in local state accordingly.
I do this with inline edit fields, when a user click the edit button I toggle this.state.isEditing to true and render the inputs and save buttons, otherwise they're rendered as span's
es6
const columns= [
{
Header: 'Some Other Column',
accessor: 'SomeOtherColumn'
},
{
Header: 'Column 2',
Cell: ({ row, original }) => {
return (<span>
{original.SomeOtherColumn}
</span>)
}
}
]
mikedevita
on 24 Oct 2017
Mike is correct. Use a custom Cell - check the doco for more details.
Also, please join the #react-table Slack channel for questions of this nature rather than using the github issue facility. This is mainly for the development pipeline and reporting bugs. You can find a badge at the top of the documentation. Thanks.
gary-menzel
on 25 Oct 2017
Related issues
schaeffer11
路
24Comments
IPessers
路
20Comments
Paul6552
路
35Comments
vaidsu
路
29Comments
larrybotha
路
20Comments
Most helpful comment
you can access the entire row's data via the
Cellproperty in the columns. You'd basically just conditionally render what you want based on the value of the other column, or track it in local state accordingly.I do this with inline edit fields, when a user click the edit button I toggle this.state.isEditing to true and render the inputs and save buttons, otherwise they're rendered as span's
es6 const columns= [ { Header: 'Some Other Column', accessor: 'SomeOtherColumn' }, { Header: 'Column 2', Cell: ({ row, original }) => { return (<span> {original.SomeOtherColumn} </span>) } } ]