How can I filter out a date between a range of date in a react-table

Question

How can I filter table data on the basis of a range of dates?

setting filter to date column here:

const tableInstance = useRef(null);
  const filterTable = (dates) => {
    if (tableInstance.current) {
      tableInstance.current.setFilter('session_date', dates);
    }
  };

onClick functionality is here:

const handleFilter = () => {
    setSessionsData(data);
    if (sessionsData) {
      const dateArray = getDates(
        moment(fromDate).format('L'),
        moment(toDate).format('L')
      );
      filterTable(dateArray);
    }
  };

Paleozoic

Answer 1

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.

Ingrate

Answer 2

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

Lynn