How to properly implement react-table filtering with MUI Date Range Picker

Viewed 1317

I am having really hard time implementing date range filtering using react-table and Date Range Picker from MUI Pickers. To tell the truth I have no idea how to implement this. Below is what I was trying to do. Please help.

This is my custom Date Range Filter:

export const SelectDateRangeFilter = ({
  column: { filterValue = [null, null], preFilteredRows, setFilter, id },
}) => {
  const [selectedDate, setSelectedDate] = useState([null, null])

  return (
    <LocalizationProvider dateAdapter={DateFnsUtils} locale={localeMap.pl}>
      <DateRangePicker
        startText="From"
        endText="To"
        value={selectedDate}
        mask={maskMap.en}
        onChange={(date) => {
          setSelectedDate(date)

          setFilter((old) => {
            return [Date.parse(date[0]) / 1000, Date.parse(date[1]) / 1000]
          })
        }}
        disableFuture
        name="calendar"
        renderInput={(startProps, endProps) => (
          <>
            <CustomMuiTextField size="small" {...startProps} />
            <CustomMuiTextField size="small" {...endProps} />
          </>
        )}
      />
    </LocalizationProvider>
  )
}

And this is the column:

{
    Header: 'Date',
    accessor: 'createTimestamp.seconds',
    Filter: SelectDateRangeFilter,
    filter: 'between',
    Cell: (props) => {
      const date = format(
        fromUnixTime(props.row.original.createTimestamp.seconds),
        'dd-MM-yyyy',
      )

      return date
    },
  },
0 Answers
Related