Как правильно реализовать фильтрацию по таблице реакций с помощью MUI Date Range Picker - PullRequest
Новая
       75

Как правильно реализовать фильтрацию по таблице реакций с помощью MUI Date Range Picker

0 голосов
/ 28 мая 2020

Мне очень трудно реализовать фильтрацию диапазона дат с помощью response-table и Date Range Picker из MUI Pickers. По правде говоря, понятия не имею, как это реализовать. Ниже то, что я пытался сделать. Пожалуйста, помогите.

Это мой собственный фильтр диапазона дат: 

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

А это столбец: 

{
    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
    },
  },
...