I have implemented a table using React Table(https://react-table.js.org). I populate the data based on the data I get from server. Right now I have two filter dropdowns on top of two columns. I want to disable column 2 filter dropdown if the column 1 filter dropdown is set to a specific value.
I have implemented the basic filter dropdown as follows:
{
Header: 'Name',
accessor: 'Name',
id: 'Name',
Cell: ({ value }) =>
value === 'group1' ? 'group1' : 'group2',
filterMethod: (filter, row) => {
if (filter.value === 'all') {
return true;
}
if (filter.value === 'group1') {
return row[filter.id] === 'group1';
}
},
Filter: ({ filter, onChange }) => (
<select
onChange={event => onChange(event.target.value)}
style={{ width: '100%' }}
value={filter ? filter.value : 'all'}
>
<option value="all">All</option>
<option value="group1">Group1</option>
</select>
),
},
{
filterable: ({ val }) => {
if (tenantName.value === 'group1') {
return true;
}
else {
return false;
}
},
Header: 'ID',
accessor: 'Id',
id: 'Id',
Cell: ({ value }) => (value === '3' ? '3' : '5'),
filterMethod: (filter, row) => {
if (filter.value === 'all') {
return true;
}
if (filter.value === '3') {
return row[filter.id] === '3';
}
if (filter.value === '5') {
return row[filter.id] === '5';
}
},
Filter: ({ filter, onChange }) => (
<select
onChange={event => onChange(event.target.value)}
style={{ width: '100%' }}
value={filter ? filter.value : 'all'}
>
<option value="all">All</option>
<option value="3">3</option>
<option value="5">5</option>
</select>
),
},
],
If I select Group1 in the first dropdown, the second dropdown needs to be enabled. However if the first dropdown is set to All then the dropdown 2 needs to be disabled. How to implement the above?
You can manage the selected values in a parent component and pass a disabled
prop according to your condition.
For example, in the example below we have 2 DropDown
components
numbers
arraynames
arrayIf the user select the number 3
from the numbers
drop down, this will make the names
drop down to be disabled.
const DropDown = ({ selectedValue, disabled, options, onChange }) => {
return (
<select onChange={onChange} disabled={disabled}>
{
options.map(o => <option value={o} selected={o == selectedValue}>{o}</option>)
}
</select>
);
}
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
numbers: [1, 2, 3, 4, 5], // 3 should disable the second dropdown
names: ['john', 'jane', 'eric'],
selectedNumber: '',
selectedName: ''
}
this.onNumbersChange = this.onNumbersChange.bind(this);
this.onNamesChange = this.onNamesChange.bind(this);
}
onNumbersChange(e) {
this.setState({ selectedNumber: e.target.value });
}
onNamesChange(e) {
this.setState({ selectedName: e.target.value });
}
render() {
const { numbers, names, selectedNumber, selectedName } = this.state;
return (
<div>
<DropDown
options={numbers}
selectedValue={selectedNumber}
onChange={this.onNumbersChange}
/>
<DropDown
options={names}
selectedValue={selectedName}
onChange={this.onNamesChange}
disabled={selectedNumber == 3} // this will be disabled if selected value of the first dropdown is 3
/>
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>