CODEWITHSUNDEEP
reactjsreact-admin
ankitjena
ankitjena

Reputation: 451

How can I execute multiple filters on top of each other in react-admin?

I'm using react-admin to manage the admin dashboard for my firebase API. Currently I'm trying to add multiple filters to my admin dashboard which include search, verified email and others. I've written multiple filters as such

const UserFilter = (props) => (
  <Filter {...props}>
    <TextInput label="Search" source="phoneNumber" alwaysOn />
    <BooleanInput label="Email Verified" source="emailVerified" alwaysOn/>
  </Filter>
);

and using it as

<List {...props} filters={<UserFilter />} />

But when I'm trying to filter, then these filters are not applied on top of each other. They are applied as OR. So if I use two filters the results are those with either one of those and both. I want the filters to be applied as AND. How do I do it?

Upvotes: 1

Views: 825

Answers (1)

gdh
gdh

Reputation: 13682

Your filter results depends on the api endpoint that you provide to the dataProvider prop.

When you try to filter for - say username equals bret, a request is made (you can check n/w tab) with the query params. For example, like this:

https://jsonplaceholder.typicode.com/users?_end=10&_order=ASC&_sort=id&_start=0&username=bret

So your backend will read the params and returns the filtered results. In your case your api endpoint always does OR not AND. Hence the issue.

One way to solve is to simply adjust your backend which returns AND results.

Other hack is to extend the DataProvider and override getList function and manipulate the api results based on your requirement. 

import simpleRestProvider from 'ra-data-simple-rest';

const dataProvider = simpleRestProvider('http://path.to.my.api/');

const myDataProvider = {
    ...dataProvider,
    getList: (resource, params) => {
        // custom getList function
    ...

See the source code of getList to copy the function code and adjust it based on your needs

Upvotes: 1

Related Questions