title: How to implement filtering logic in React table?
body: <p>Im using React Table to display data I receive from an API call. Currently I save the state locally and the table displays the data. I have added filtering of column values for two columns. My filtering logic is as follows:</p>
  
  <pre><code>    &lt;ReactTable
    data={tableData}
    noDataText="Loading.."
    filterable
    defaultFilterMethod={(filter, row) =&gt;
      String(row[filter.id]) === filter.value}
      };
    }}
    columns={[
      {
        columns: [
          {
            Header: 'Name',
            accessor: 'Name',
            id: 'Name',
            Cell: ({ value }) =&gt; (value === 'group1' ? 
            'group1' : 'group2'),
            filterMethod: (filter, row) =&gt; {
              if (filter.value === 'all') {
                return true;
              }
              if (filter.value === 'group1') {
                return row[filter.id] === 'group1';
              }
              if (filter.value === 'group2') {
                return row[filter.id] === 'group2';
              }
            },
            Filter: ({ filter, onChange }) =&gt;
              &lt;select
                onChange={event =&gt; onChange(event.target.value)}
                style={{ width: '100%' }}
                value={filter ? filter.value : 'all'}
              &gt;
                &lt;option value="all"&gt;All&lt;/option&gt;
                &lt;option value="group1"&gt;Group1&lt;/option&gt;
                &lt;option value="group2"&gt;Group2&lt;/option&gt;
              &lt;/select&gt;,
          },
     }
  </code></pre>
  
  <p>As of now, the filtering rule is hard coded between two values. How to implement the filter logic so that the filtering is dynamic?(If there are 3 or 7 different values in a particular column, the dropdown should display all 7 values and filter should work based on any of the value selected). Since Im using React Table(<a href="https://react-table.js.org" rel="nofollow noreferrer">https://react-table.js.org</a>). </p>