# How would I go about building a query builder element like Airtable has?

**URL:** <https://community.weweb.io/t/how-would-i-go-about-building-a-query-builder-element-like-airtable-has/2000>\
**Category:** Ask us anything\
**Created:** [March 8, 2023, 5:35pm UTC](https://community.weweb.io/t/how-would-i-go-about-building-a-query-builder-element-like-airtable-has/2000 "2023-03-08T17:35:40Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![avm](https://avatars.discourse-cdn.com/v4/letter/a/ba9def/32.png) [@avm](https://community.weweb.io/u/avm)\
**Post date:** [March 8, 2023, 5:35pm UTC](https://community.weweb.io/t/how-would-i-go-about-building-a-query-builder-element-like-airtable-has/2000/1 "2023-03-08T17:35:40Z")

</div>

Learning WeWeb as I have a bubble app that I’m looking to possibly switch over.

With my app, there are 50+ fields users can query against across a relational database. I had built these elements one by one to filter for in Bubble and it’s a pain in the butt to deal with. In bubble I would need to have a plugin built to have this sort of airtable like filtering.

I actually noticed in one of the WeWeb tutorial videos this query builder exists somewhere in the editor (maybe in the API section?).

Wasn’t sure if this was a native element I could build out in the editor for users to interact with but figured I’d ask away. It sounds like if not, then this could be built as a custom component? Just wanting to make sure I am understanding 100%

 ![image](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/5/5535a2affb82f277e06dd55984396603d9e80cd9.png)

---

<div class="post-metadata">

**Author:** ![chadsmithclt](https://avatars.discourse-cdn.com/v4/letter/c/8797f3/32.png) [@chadsmithclt](https://community.weweb.io/u/chadsmithclt)\
**Post date:** [March 16, 2023, 7:20pm UTC](https://community.weweb.io/t/how-would-i-go-about-building-a-query-builder-element-like-airtable-has/2000/2 "2023-03-16T19:20:46Z")

</div>

Do you own the data that users are querying on (as in, you have access to the DB) where user data is stored?

---

<div class="post-metadata">

**Author:** ![avm](https://avatars.discourse-cdn.com/v4/letter/a/ba9def/32.png) [@avm](https://community.weweb.io/u/avm)\
**Post date:** [March 16, 2023, 10:00pm UTC](https://community.weweb.io/t/how-would-i-go-about-building-a-query-builder-element-like-airtable-has/2000/4 "2023-03-16T22:00:56Z")

</div>

Yes I do

---

<div class="post-metadata">

**Author:** ![Alexis](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/alexis/32/13248_2.png) [@Alexis](https://community.weweb.io/u/Alexis)\
**Post date:** [March 17, 2023, 2:13pm UTC](https://community.weweb.io/t/how-would-i-go-about-building-a-query-builder-element-like-airtable-has/2000/5 "2023-03-17T14:13:48Z")

</div>

Hi, its part of the editor UI, you can see it when you bind an array or a collection and click on the filter button showing up under the formula input, you can also see it on the pagination/filter/sort step of your collections.

You couldn’t drag&drop it, its not a weweb element. But yes, you can recreate it in nocode and use your variables to bind it to the filters in the weweb editor.

 ![Capture d’écran 2023-03-17 à 15.06.45](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/5/540378485c012c45b5580c48cf3095d3de0af5cb.png)

---

<div class="post-metadata">

**Author:** ![kyanaloe](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/kyanaloe/32/1076_2.png) [@kyanaloe](https://community.weweb.io/u/kyanaloe)\
**Post date:** [March 21, 2023, 3:18pm UTC](https://community.weweb.io/t/how-would-i-go-about-building-a-query-builder-element-like-airtable-has/2000/6 "2023-03-21T15:18:35Z")

</div>

can you expand a little on how this could be recreated in nocode?

---

<div class="post-metadata">

**Author:** ![avm](https://avatars.discourse-cdn.com/v4/letter/a/ba9def/32.png) [@avm](https://community.weweb.io/u/avm)\
**Post date:** [March 28, 2023, 4:18pm UTC](https://community.weweb.io/t/how-would-i-go-about-building-a-query-builder-element-like-airtable-has/2000/7 "2023-03-28T16:18:15Z")

</div>

@Alexis @kyanaloe is this the right way of thinking about it? Since the nested filter groups are recursive in nature, does this mean we have to build the element to have a fixed number of nested layers? For example, I have two layers of nesting here.

I am assuming we would need to have a variable setup like so when adding the different filters & filtergroups?

Would certainly be easier if we had the element itself from weweb exposed to use 🙂

```auto
{
    "filters": {
        "filterGroup" : 
        [
            {
                "index": 0,
                "columnID": "A",
                "operator": "=",
                "value": "1",
            },
            {
                "index": 1,
                "nested": true,
                "conjuction": "where",
                "filterGroup" : [
                    {
                        "index": 0,
                        "columnID": "A",
                        "operator": "=",
                        "value": "1",
                    }
                ]
            }
        ],
        "conjuction": "where"
    }
}

```

 ![image](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/1/1adf48efb4c892f9a46e3cc84866135da8430d24.png)