Search code examples
javascriptarraysreactjsreact-tablereact-table-v7

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

Solution

  • 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.