In a page I have a button to another list showing the filtered results:
<Button
color="primary"
component={Link}
to={{
pathname: '/jobseekers',
search: `filter=${JSON.stringify({ skills: record.id })}`,
}}
>
Job Seekers
</Button>
However, when I click on the menu for jobseekers
resource, I get the filtered results. It passes filtering options in the url to the backend, I don't know how to reset them when the jobseeks
on the menu was clicked.
I tried these on my list but they have no effect, it says setFilters
isn't a function, also console shows that the listContext
has null values for filters
import { useListContext } from 'react-admin';
import { useEffect } from 'react';
const MemberList = ({ permissions, hasDelete, hasEdit, hasShow, resource, ...props }) => {
const listContext = useListContext();
listContext.setFilters({}, []);
useEffect(() => {
listContext.filterValues = null
listContex.tsetFilters({}, []);
console.log("mem list context:",listContext)
}, [listContext, props]);
From the official documentation Resetting Filters On Menu Click:
By default, a click on <Menu.Item >
for a list page opens the list with the same filters as they were applied the last time the user saw them. This is usually the expected behavior, but your users may prefer that clicking on a menu item resets the list filters.
Just use an empty filter
query parameter to force empty filters:
<Menu.Item
to="/posts?filter=%7B%7D" // %7B%7D is JSON.stringify({})
primaryText="Posts"
leftIcon={<BookIcon />}
/>