Filter data table (filter vs. search)

[ishah-twilio]

Hello,

To filter a data table we like to present various dropdown menus categories but also allow users to be able search using the open field.

What component can we use to toggle between Search vs. Filter for data table?
~ We like to use toggle switch (Example - paste website has for theme change - Default-Legacy)? Any guidance?

Link to InVision design is provided in the DSys office hours signup sheet (11/17)

[kate-porter]

Hey @ishah-twilio - we don't have a toggle component yet. The toggle component is tentatively planned for Q1 2021, which you can see on our roadmap.

However, you can still create what you have in your design using Paste, you'll just need to work with your engineering team to create a custom composition (which is what we did for the Paste website theme switcher). I put together a very rough version of it in this code sandbox.

[kate-porter]

Hey again @ishah-twilio - I chatted with the team on this one, and we did have one question about the search/filter toggle in general.

I know that's a common pattern throughout Console, but is it really a technical limitation that the user can only filter OR search, meaning the user cannot search within a filtered set of data? That's a pretty unusual interaction (even though it is common throughout Console), so I'd urge you to chat with your engineering team to understand if that's truly a technical limitation, and if it's not, consider if there might be alternatives that would improve the user experience. It seems that this list of SIMs could be very large, so being able to filter and then search within that set of filtered data might be a better experience.

[ishah-twilio]

Thank you.

There is no engineering restriction or limitation for this feature pattern. But will check again and make sure.
We had tested the two patterns in the usability study for 7 users.

1. Option A -- Filter and Search toggle
2. Option B -- Open pattern that allows users to Filter and be able to search as one combine experience. (pattern that DSys is suggesting).

Option B was well received with impression from users that it has more advanced capabilities to filter available data. As DSys suggested will be updating my design as follow.