CODEWITHSUNDEEP
javascriptarraysreactjsreact-tablereact-table-v7
Hafiz Muhammad Bilal
Hafiz Muhammad Bilal

Reputation: 315

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

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);
    }
  };

Upvotes: 6

Views: 5116

Answers (2)

Muhammad Zaeem Zahid
Muhammad Zaeem Zahid

Reputation: 81

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.

Upvotes: 3

krishank Tripathi
krishank Tripathi

Reputation: 626

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

Upvotes: -1

Related Questions