如何根据日期范围过滤表格数据?
在此处将过滤器设置为日期列:
const tableInstance = useRef(null);
const filterTable = (dates) => {
if (tableInstance.current) {
tableInstance.current.setFilter('session_date', dates);
}
};
onClick 功能在这里:
const handleFilter = () => {
setSessionsData(data);
if (sessionsData) {
const dateArray = getDates(
moment(fromDate).format('L'),
moment(toDate).format('L')
);
filterTable(dateArray);
}
};
答案 0 :(得分:1)
将此过滤器添加到您各自的列对象
{
id: 'your_column_id',
accessor: 'your_accessor',
filter: (rows, id, filterValue) => {
return rows.filter(
(row) =>
filterValue.length <= 0 ||
!filterValue ||
filterValue.includes(row.values[id])
);
}
}
此处 filterValue 包含包含所有可能匹配项的数组,即在您的情况下,dateArray(从“fromDate”到“toDate”的所有日期)。
答案 1 :(得分:0)
如果希望你对钩子的反应概念很好,或者如果你需要帮助,请点击下面的链接
现在您的问题是您必须采取的方法。 有两个状态值,您已对其进行过滤,即您的 date_range。
您可以在过滤器点击时传递一个事件来更新 date_range 的状态 您将在如下表中添加钩子来设置值,
const [list, setList] = useState([]);
useEffect(() => {
fetch('http://localhost:3333/list')
.then(data => {
setList(data.json);
})
})
}, [])
另外,要记住的另一件事是不要在任何状态更改时盲目调用 API,即,这里的状态是否真的从原始值改变了任何值,您必须了解纯组件的概念以防止您使用组件从盲目调用API,下面是react中使用纯组件的链接,