反应表日期范围过滤器

Question

我正在尝试在我的 React 表中实现日期范围过滤器。当我更改开始或结束日期时，它会触发过滤器功能，创建最小和最大日期，但是当它完成时，不会过滤任何日期并且输入从所选日期开始为空。 这是我的代码：

const ChartData = () => {
const columns = React.useMemo(
() => [
  {
    Header: "Date",
    columns: [
      {
        Header: "Date",
        accessor: "date",
        id: "date",
        Filter: chartFilter.DateRangeColumnFilter,
        filter: "between"
      }
    ]
  }
],
[]
);

const data = React.useMemo(() => dummyData(100000), []);

return (
   <div className={classes.tableWrapper}>
      <Table columns={columns} data={data} />
   </div>
 );
};
export default ChartData;

过滤页面：

  export function DateRangeColumnFilter({
     column: { filterValue = [], preFilteredRows, setFilter, id }
     }) {
     const [min, max] = React.useMemo(() => {
     let min = preFilteredRows.length ? new Date(preFilteredRows[0].values[id]).getTime() : 0;
     let max = preFilteredRows.length ? new Date(preFilteredRows[0].values[id]).getTime() : 0;

  preFilteredRows.forEach((row) => {
     min = Math.min(new Date(row.values[id]).getTime(), min);
     max = Math.max(new Date(row.values[id]).getTime(), max);
   });
  return [min, max];
 }, [id, preFilteredRows]);

 return (
<div style={{display: "flex"}}>
  <input
    value={filterValue[0] || ""}
    type="date"
    onChange={(e) => {
      const val = e.target.value;
      setFilter((old = []) => [val || undefined, old[1]]);
    }}
    style={{
      width: "70px",
      marginRight: "0.5rem"
    }}
  />
  to
  <input
    value={filterValue[1] || ""}
    type="date"
    onChange={(e) => {
      const val = e.target.value;
      setFilter((old = []) => [old[0], val || undefined]);
    }}
    style={{
      width: "70px",
      marginLeft: "0.5rem"
    }}
  />
 </div>
 );
}

我在这里缺少什么？

Answer 1

所以我遇到了同样的麻烦 这是我的解决方案

我用过 flatpickr ，时刻

日期过滤器.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>

); };

现在取消您的 mainTable 组件文件。添加一个名为 filtertypes 的常量。这是对象

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

不要忘记在列定义中添加过滤器和过滤器属性