Reputation: 167
I need to disable certain rows based on a particular condition. This is my code:
<ReactTable
data={this.state.categoryTable}
loading={this.state.loading}
noDataText="Please select a country template"
columns={[
{
Header: 'Category/Lot',
accessor: 'category_name'
}, {
Header: "Display Name",
accessor: "display_name",
Cell: this.renderEditable
}, {
Header: 'Price(per month)',
accessor: 'price',
Cell: this.renderEditable
}, {
Header: 'Spots',
accessor: 'spots',
Cell: this.renderEditable
}>
I need to disable Price and Spots row when the Category/Lot is equal to "South America"
Upvotes: 0
Views: 12919
Reputation: 3063
I figured out that in order to access another field in current row you should access row.row
,
So, your code should be written something like that:
<ReactTable
data={this.state.categoryTable}
loading={this.state.loading}
noDataText="Please select a country template"
columns={[
{
Header: 'Category/Lot',
accessor: 'category_name'
}, {
Header: "Display Name",
accessor: "display_name"
}, {
Header: 'Price(per month)',
accessor: 'price',
Cell: row => row.row.category_name=="South America" ? ***disable*** : row.value
}, {
Header: 'Spots',
accessor: 'spots',
Cell: row => row.row.category_name=="South America" ? ***disable*** : row.value
}]}
/>
Now, I am not sure exactly lwhat do you mean by disabling a row.. but you can handle a state with collections of "disabled" indices in table or some solution like that.
Or, if you are rendering some other component inside a cell, then you could just pass a "disable" to some property:
Cell: row => (<SomeSubComponent disable={row.row.category_name=="South America"} value={row.value} />)
Hope I helped :)
Upvotes: 5