title: How to filter a React table using custom filter component?
body: <p>I have a React Table(<a href="https://react-table.js.org" rel="nofollow noreferrer">https://react-table.js.org</a>) which gets populated from the data coming from an API. Above the table I have created a filter component which consists of a dropdown with multiple options. Once specific parameters are selected from the dropdown, I need to filter the Table based on the selected parameters.
  I store the state of the filter component and the state of the table component separately. Since both the table and the filter are separate components , how to take the values from the filter component and filter the table?
  My Table is as follows:</p>
  
  <pre><code>&lt;ReactTable
  data={tableData}
  noDataText="No Appointments"
  loading={this.props.loading}
  showPagination={false}
  filterable
  defaultFilterMethod={(filter, row) =&gt;
    String(row[filter.id]) === filter.value}
  columns={[
    {
      columns: [
        {
          sortable: false,
          filterable: false,
          Header: "Id",
          accessor: "resourceId",
          headerStyle: {
            background: '#ECEFF1',
          },
        },
        {
          sortable: false,
          filterable: false,
          Header: "Tenant Name",
          accessor: "Name",
          id: "Tenant Name",
          headerStyle: {
            background: '#ECEFF1',
          },
        },
   &lt;/ReactTable&gt;
  </code></pre>
  
  <p>My filter component is as follows:</p>
  
  <pre><code>export default class PopoverExampleAnimation extends 
  React.Component {
  
  constructor(props) {
  super(props);
  
  this.state = {
    open: false,
    clicked: [],
    Id: '',
    tenantName: '',
  };
  
  this.handleRequestClose = this.handleRequestClose.bind(this);
  this.getId = this.getId.bind(this);
  this.getTenantName = this.getTenantName.bind(this);
  
  }
  
  handleTouchTap = (event) =&gt; {
  // This prevents ghost click.
   event.preventDefault();
  
  this.setState({
    open: true,
    anchorEl: event.currentTarget,
    });
   };
  
  handleRequestClose = () =&gt; {
    this.setState({
    open: false,
    });
   };
  
  getId = (Id) =&gt; {
      console.log(Id);
      this.setState({Id});
  }
  
  getTenantName = (tenantName) =&gt; {
   console.log(tenantName);
  this.setState({tenantName});
  }
  
  render() {
  return (
    &lt;div&gt;
      &lt;RaisedButton
          onClick={this.handleTouchTap}
          label="FILTER"
          labelColor="#26A69A"
      /&gt;
      &lt;Popover
          open={this.state.open}
          anchorEl={this.state.anchorEl}
          anchorOrigin={{ horizontal: 'left', vertical: 'bottom' }}
          targetOrigin={{ horizontal: 'left', vertical: 'top' }}
          onRequestClose={this.handleRequestClose}
          animation={PopoverAnimationVertical}
      &gt;
        &lt;Menu&gt;
          &lt;MenuItem
              primaryText={"NAME - " + this.state.tenantName}
              rightIcon={&lt;ArrowDropRight /&gt;}
              menuItems={[
                &lt;MenuItem 
                primaryText="Group 1" 
                onClick={() =&gt;
                  this.getTenantName('Group 1')
                }
                /&gt;,
                &lt;Divider /&gt;,
                &lt;MenuItem primaryText="Group 2"
                onClick={() =&gt;
                  this.getTenantName('Group 2')
                }
                /&gt;,
              ]}
          /&gt;
  
          &lt;Divider /&gt;
          &lt;MenuItem
              primaryText={"ID -   " + this.state.Id}
              rightIcon={&lt;ArrowDropRight /&gt;}
              menuItemStyle={{ backgroundcolor: '#E0F2F1' }}
              menuItems={[
                &lt;MenuItem primaryText="1" onClick={() =&gt;
                  this.getId('1')
                }
                /&gt;,
                &lt;Divider /&gt;,
                &lt;MenuItem primaryText="2" onClick={() =&gt;
                  this.getId('2')
                }
                /&gt;,
                &lt;Divider /&gt;,
                &lt;MenuItem primaryText="3" onClick={() =&gt;
                  this.getId('3')
                }
                /&gt;,
                &lt;Divider /&gt;,
                &lt;MenuItem primaryText="4" onClick={() =&gt;
                  this.getId('4')
                }
                /&gt;,
              ]}
          /&gt;
          &lt;Divider /&gt;
          &lt;RaisedButton
              label="APPLY"
              style={{ margin: 2, width: '60px' }}
              labelColor="#FAFAFA"
              backgroundColor="#26A69A"
          /&gt;
          &lt;RaisedButton
              label="CANCEL"
              style={{ margin: 22, width: '60px' }}
              labelColor="#26A69A"
              onClick={() =&gt;
                //this.getId(' ')
                this.handleRequestClose()
               }
          /&gt;
  
        &lt;/Menu&gt;
      &lt;/Popover&gt;
    &lt;/div&gt;
    );
   }
  }
  </code></pre>
  
  <p>Both the table and filter are separate components and Im not using Redux for state management.</p>