react-admin

How can I reset the filters of react-admin list


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

Solution

  • 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 />}
    />