Disabling certain rows based on condition in react-table

Question

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"

It looks like you're missing a closing ] for your columns array, and a closing } afterwards, ending your columns prop — Blundering Philosopher
– Blundering Philosopher, Commented Jan 26, 2019 at 12:15

SomoKRoceS · Accepted Answer · 2019-01-26 12:24:02Z

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 :)

Collectives™ on Stack Overflow

Disabling certain rows based on condition in react-table

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related