score:2

Accepted answer

Add this filter to your respective column object

{
  id: 'your_column_id',
  accessor: 'your_accessor',
  filter: (rows, id, filterValue) => {
    return rows.filter(
      (row) =>
        filterValue.length <= 0 ||
        !filterValue ||
        filterValue.includes(row.values[id])
    );
  }
}

Here the filterValue contains the array containing all the possible matches that are required i.e dateArray (all dates from 'fromDate' to 'toDate') in your case.

score:0

If hope u are good with react concept of hooks or if u need help please follow the below link

  1. https://reactjs.org/docs/hooks-reference.html
  2. https://www.digitalocean.com/community/tutorials/how-to-call-web-apis-with-the-useeffect-hook-in-react

Now to your question the approach you must take. There are two states value which u have put filter on i.e, your date_range.

You can just pass a event on filter click to update the states for date_range Where you will add hooks to set value in table like given below,

const [list, setList] = useState([]);

  useEffect(() => {
     fetch('http://localhost:3333/list')
   .then(data => {
       setList(data.json);
    })
   })
 }, [])

Also, One more thing to keep in mind is not to blindly call API on any state changes i.e, is there any value that have really changed from original one in state here you must know the concept of pure component to prevent you component from blindly calling the API, below is the link to use pure component in react,

  1. https://reactjs.org/docs/react-api.html
  2. https://www.digitalocean.com/community/tutorials/five-ways-to-convert-react-class-components-to-functional-components-with-react-hooks

Related Query

More Query from same tag