React-table: Using custom filter with server-side data on version 6

[bespaloff]

When declaring custom filters in columns with "Filter:" property, calling 'onFiltersChange' or 'onFilteredChange' or any other function is impossible because they are undefined.

My question is how to trigger data-fetch with correct filter value then? Looks like this thing changed with release of 6th version but it is not mentioned in docs yet.

Code of this column with custom filter:

{
    Header: 'Date',
        id: '_source.notification.common.summationdate',
        accessor: d => moment(d._source.notification.common.summationdate).format('DD.MM.YYYY'),
        minWidth: 155,
        maxWidth: 155,
        Filter: () => (
            <DateRangePicker
                hideKeyboardShortcutsPanel
                startDatePlaceholderText="От"
                endDatePlaceholderText="До"
                startDate={this.state.dobStartDate}
                endDate={this.state.dobEndDate}
                onDatesChange={({ startDate, endDate }) => { this.setState({ dobStartDate: startDate, dobEndDate: endDate }); onFiltersChange({ dobStartDate: startDate, dobEndDate: endDate }) }}
                focusedInput={this.state.focusedInput}
                onFocusChange={focusedInput => { this.setState({ focusedInput }); }}
                isOutsideRange={() => false}
                withPortal={true}
                showClearDates={true}
                displayFormat={() => moment.localeData('ru').longDateFormat('L')}

            />
        )
}

P.S. Really great component, saved me a hundreds hours of work. Thank you for your work.

[bespaloff]

I made some research and found out that react-table are waiting for onChange callback to be fired by filter component. Airbnb's react-dates doesn't have this callback. May be you can suggest workaround? Thanks!

[aaronschwartz]

The onFilterChange has been renamed to just onChange. Looks like we missed a spot in the documentation. You're on the right track. You need to change your onDatesChange method to call the onChange method with whatever value you want passed to column's filterMethod.

onDatesChange={({ startDate, endDate }) => { 
  onChange({ dobStartDate: startDate, dobEndDate: endDate })
}

[bespaloff]

@aaronschwartz, thank you for reply. Unfortunately, I get Uncaught ReferenceError: onChange is not defined using this code.

[aaronschwartz]

See the custom filtering demo for an example. The last column is a custom select dropdown.

https://react-table.js.org/#/story/custom-filtering

If you want to hop on the slack channel we can take a closer look at your code.

[bespaloff]

@aaronschwartz Yes, now it works, thanks! I missed the point that I should transfer object like ({filter, onChange}) and instead I transfered two variables like (filter, onChange)