CODEWITHSUNDEEP
reactjsreact-admin
Dunlin
Dunlin

Reputation: 13

How to remove filter fields in react-admin?

I wanted to implement the "Remove filters" button which removes all filter fields that have been picked via filters prop for the component after a click. I know there is an option to clear fields but I want to remove them. I have checked the documentation but couldn't find a solution. I've tried to hide these fields with CSS selectors but in this way, I can't pick them from the list again.

I am using react-admin 3.19

Upvotes: 1

Views: 1056

Answers (1)

François Zaninotto
François Zaninotto

Reputation: 7335

In react-admin list views, displayed filters are set via the URL. This means you can reset the filters by creating a button that changes the location to a list with no displayed filters.

import * as React from "react";
import Button from '@material-ui/core/Button';
import { Link } from 'react-router-dom';
import { useResourceContext } from 'react-admin';

const ResetFilters = () => {
    const resource = useResourceContext();
    return (
        <Button
            color="primary"
            component={Link}
            to={{
                pathname: `/${resource}`,
                search: 'filter={}&displayedFilters={}',
            }}
        >
            Reset filters 
        </Button>
    );
};

See https://marmelab.com/react-admin/doc/3.19/List.html#linking-to-a-pre-filtered-list for details.

Upvotes: 1

Related Questions