Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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);
    }
  };
like image 765
Hafiz Muhammad Bilal Avatar asked Dec 22 '20 14:12

Hafiz Muhammad Bilal


People also ask

How do you get data between two dates in react JS?

You can start by first creating two date objects, one for the start date and another for the end date. Then, find out how many days are in between these dates. Finally, you can loop through this number and get the current date plus the current index in the loop and print that.

How to filter out a range of dates in Excel?

Filtering Date by Using FILTER Function 3. Utilizing Pivot Table to Filter the Range of Dates 4. Applying VBA to Filter Date Range 5. Using Excel AND and TODAY Functions to Filter Date Range 1. Using Excel Filter Command to Filter Date Range The easiest operation to filter out a range of dates is using the Filter command from Editing ribbon.

How do I add a date range to a spreadsheet?

Right-click Order Date in the Dimensions pane and then select Create > Calculated Field . Drag Date Range to Filters , select True, and then click OK. Right-click Date Range on the Filters shelf, select Apply to Worksheets, and then select All Using this Data Source.

How to filter delivery date range?

Now to Filter Date Range click on the Drop-Down menu beside Delivery Date. Then click on any Date that you want to Filter. To select Multiple Dates Click on the Select Multiple Items then press OK. At first, uncheck the All box. Then select your desired Dates.

How does the date filter model represent the date?

It should be noted that the Date Filter Model represents the Date as a string in format 'YYYY-MM-DD', however when doing comparisons the date is provided as a JavaScript Date object as that's what date pickers typically work with. The model uses string representation to make it easier to save and avoid any timezone issues.


1 Answers

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.

like image 192
Muhammad Zaeem Zahid Avatar answered Oct 22 '22 07:10

Muhammad Zaeem Zahid