Table: Search + Filters

[amyodea]

Hey Paste team!

Have a QQ about filters + search on a table. Currently, our subaccount page has this layout. Customers currently expect the filtering by status to happen instantly when they select something from Status dropdown. It is not clear for them that they need to click the “Filter” button for this.

We are discussing two options:

1. Having a vertical layout, that has search, account status and then a 'search' button. The button would trigger the search + filter together.

2. Having a stacked layout, like mentioned in Paste docs here. Would we need to have a CTA per row?

Would appreciate your thoughts on this, thank you! :)

[TwilioPasteBot]

Disclaimer: This is a very experimental bot using OpenAI's GPT-4. The answers may not be correct, a human will review the answer and update it if necessary.

---

Sorry, I don't know how to help with that.

I did do a search though, and I managed to find these other Discussions that might be similar or related to your question. Give them a read to see if they answer your question. If they do, head back here and update this discussion and mark it as answered, pointing others to the related discussion:

• UX for Table Filter sections (Office hours: Sept 29, 2020) (updated: 03/29/2023, similarity score: 87%)
• Items filtering in Sidebar (updated: 11/06/2023, similarity score: 87%)
• Search Field - Answer (updated: 07/22/2022, similarity score: 87%)

[dosubot[bot]]

For the options you're considering, here are some insights based on the Paste design system:

1. Vertical Layout: This approach can be effective if you want to streamline the user experience by combining search and filter actions into a single button. However, if users expect instant filtering, you might consider implementing dynamic filtering, where changes in the dropdown immediately update the results without needing a button click. This aligns with the Paste design system's support for instant filtering, which is suitable for explorative filter experiences ^[1].

2. Stacked Layout: According to the Paste documentation, a stacked layout can be used to combine search and filters effectively. You don't necessarily need a call-to-action (CTA) per row unless each filter action is distinct and requires separate confirmation. If the filters are meant to work together, a single CTA for the entire group might suffice. This layout can help keep the interface clean and organized, especially if you have multiple filters ^[1].

Consider the user expectations and the complexity of the filtering logic when deciding between these options. If users are accustomed to instant feedback, dynamic filtering might enhance their experience.

To continue talking to Dosu, mention @dosu.

[jhanvi1399]

Hi @amyodea!

In Paste, we have guidance on fetching results using the Filters pattern. The approach you take largely depends on your use case and database setup. There are 2 options:

1. Batch Filtering: requires the user to click an “Apply” button to see the results.
2. Dynamic Filtering: filters are applied immediately after a user selects a filter option.

We would recommend following the Filter pattern and evaluating which approach works better for your specific use case. The pattern will also help you determine when should either of the above approaches should be used.

Do let us know if you have any questions!