React-table: Filtering on press Enter

[pasichnyk]

Need to change filters launching event. I'm using server-side data. And it sends request after every button's click in filters.... that does not fit to server-side data.

How to make filters launching on pressing Enter, not on any buttons.

[gary-menzel]

Create your own Filter component for the column (or columns) you want to filter.

There is an example in the doco "Custom Filtering". It uses a <select /> but you can put any component in there to filter however you want.

[lc-stevenzhang]

        Header: 'Class',
        accessor: 'class_name',
        Filter: ({ filter, onChange }) => {
             return (
                <Input
                     onKeyPress={event => {
                         if (event.keyCode === 13 || event.which === 13) {
                                onChange(event.target.value)
                        }
                    }}  
                />  
          )},

[starrybleu]

After I followed @lc-stevenzhang 's code, I found it doesn't keep filtered state. So there is an unexpected behavior that the last entered input filter only works. Is there a workaround?
When I call onChange, I cannot stop fireFetchData. If I could stop fireFetchData along with onChange, it will be great!