React-table: How to call default filter method from child element

[missmellyg85]

I would like to have a single filter input that filters on all columns with filtering enabled.
I am having trouble firing an event that triggers filtering in the table. Ideally, I'd like to be able to add an onChange call to my input that sends the right data to the table's default onFilterChange method.

So far, I've tried a few things, but this is the closest to what I'd want, though it doesn't work:

<ReactTable
      data={this.state.savedSearches}
      columns={columns}
      showFilters={true}
      defaultFilterMethod={(filter, row) => 
            (row[filter.id].toUpperCase().includes(filter.value.toUpperCase()))}
>
      {(state, makeTable, instance) => {
            return (
                  <div>
                        <div>
                              <label>Search:</label>
                              <input type="text" onChange={(e) => {
                    state.onFilteringChange(state.columns[3], e.target.value)
                }}/>
                        </div>
                        {makeTable()}
                  </div>
            )
      }}
</ReactTable>

I can't seem to find a way to do this.

[tannerlinsley]

In the next major version, filters will be a fully controllable prop.
Would this help?

On Wed, May 10, 2017 at 10:20 AM Missy Williams [e-mail]
wrote:

I would like to have a single filter input that filters on all columns
with filtering enabled.
I am having trouble firing an event that triggers filtering in the table.
Ideally, I'd like to be able to add an onChange call to my input that sends
the right data to the table's default onFilterChange method.

So far, I've tried a few things, but this is the closest to what I'd want,
though it doesn't work:

data={this.state.savedSearches}
columns={columns}
showFilters={true}
defaultFilterMethod={(filter, row) =>
(row[filter.id].toUpperCase().includes(filter.value.toUpperCase()))}
>
{(state, makeTable, instance) => {
return (

Search:
state.onFilteringChange(state.columns[3], e.target.value)
}}/>

{makeTable()}

)
}}

I can't seem to find a way to do this.

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
https://github.com/tannerlinsley/react-table/issues/260, or mute the
thread
https://github.com/notifications/unsubscribe-auth/AFUmCe2NcPOfVLpqWADtcolhmobamiOrks5r4ePNgaJpZM4NW55w
.

[missmellyg85]

It will definitely help if I can hook into the filtering of the main component.

[tannerlinsley]

This is now possible in the latest version. Simply build your own filter model using the filtered prop like so:

filtered={[
  {id: 'columnID', value: 'myFilterValue'},
  {id: 'otherColumnID', value: 'myOtherFilterValue'}
]}