Tree-structured filter and related table columns

Question

I'm struggling with the logic of a filtering option. In that filter I have multiple roots and nodes (see example below):

The user can interact with the filter and select either an entire root and all its nodes (e.g. Fruit), or just some nodes inside one root (e.g. Apple and Zucchini).

In the table where the selected options will be filtered for, I would like to display roots and nodes in two distinct columns, like so:

The first column (e.g. Groceries category) is the one the user will go check most of the time to have a high overview of the elements in the table, but I don't know if it makes sense to have two columns for one filter.

Thanks!

Answer 1

I’m not sure you benefit from using a table here. It seems to me the grocery category names are more like headers to your sections. See these examples, depending on the count of items inside categories:

Answer 2

you could also do

[-] Apple
[-] Pear
[-] Banana
[X] All Fruits
----
[X] Paprika
[ ] Zucchini
[o] All Veggies

If someone selects "All Veggies". disable the individual Veggies (ie gray). If someone selects a single Vegetable, use a circle or disable the "All Veggies"

Answer 3

I have a question, do you have a fixed number of fruits and vegetables?

I'm assuming that you can't add all the fruits and vegetables because your app or solutions it's kind of meal preparation tool. But let's move out of assumptions, I worked on a project that research didn't want to select all the option for the app I worked but I had multiple tags so I had to add a search field. That's why I'm asking if you have a fixed number of elements on the filter.

For the filter with a search included I had to include the container group with just the solution shown in the filter to bind the mental model from the user with the IA