score:3

So i was having the same trouble here is my solution

i have used flatpickr , moment

DateFilter.tsx

export const DateFilter = ({
  column: {
    filterValue,
    setFilter,
    preFilteredRows,
    id,
  },
  rows
}: any) => {
  const dates = preFilteredRows.map((val: any) => moment(val.original[id],dateFormat))
  const minDate = moment.min(dates).subtract(1,'day') // To include the date
  const maxDate = moment.max(dates).add(1, 'day') 
  return (
    <React.Fragment>
      <Flatpickr
        className='form-control'
        onChange={(date) => {
          if (date.length === 2) {
            setFilter([date[0],date[1]])
          }
        }}
        options={{
          enable: [
            {
              from: minDate.toDate(),
              to : maxDate.toDate()
            }
          ],
          mode : 'range'
        }}
      />

  </React.Fragment>

); };

now un your mainTable component file . add a constant called filtertypes . and here is the object

      const filterTypes : any = {
        date: (rows: any[], id: any, filterValue: any) => {
          let start = moment(filterValue[0]).subtract(1, 'day')
          let end = moment(filterValue[1]).add(1, 'day')
          return rows.filter(val => 
           moment(val.original[id],dateFormat).isBetween(start, end);
          )
        }
}

Don't forget to add Filter and filter properties in your column definition


Related Query

More Query from same tag