Let's say there is a tree table displaying a hierarchical structure. There are actually two kinds of objects displayed in the table, one kind forming the internal nodes of the tree and the other one the leaves (e.g. nested categories and articles). The children of every internal node are always either all internal nodes or all leaves.

The items in the table can be filtered by a full-text search and some multi-select filters (e.g. draft/published status of the article). All filters apply to the leaves only; the displayed items are determined by fetching the leaves according to the filters and then adding the internal nodes above them.

All the internal nodes have expand/collapse buttons. There are two buttons, Expand All and Collapse All, in the table header.

How should the filters interact with the expanded/collapsed state in the table? If I start with a fully collapsed table and use the full-text search, it seems obvious that the table should display the matching items fully expanded, since what I'm searching are actually the leaves. If I then cancel the search, should I again see the table fully collapsed, or should items matching the search stay expanded? In general, what should happen to the expanded/collapsed state if I

  1. add a filter?
  2. remove/clear a filter?
  3. edit a filter?

Note that for some filters, "removing" them expands the matching row set (e.g. clearing the search field), while for others, it restricts it (e.g. unchecking the "Draft" checkbox in the "Status" multi-select filter, as long as the "Published" checkbox is checked).

Should the other filters "behave the same", in some way, as the search? Should they also expand all the matching items?

Should there perhaps be a "Reset" / "Clear all filters" button (that would behave differently from just clearing all filters one by one)?

How should the Expand All and Collapse All buttons interact with everything? It seems obvious that they should only act on visible items, i.e. those matching the current filters, but anything beyond that?

I'm racking my brain trying to think of all the possible combinations of user actions and the desired outcomes. To give a single semi-comprehensive scenario:

I start with a fully collapsed table. I manually expand some internal nodes. I enter a word into the search field, getting some results. I add a multi-select filter, restricting the result set further. I again expand/collapse some of the displayed nodes. I select a different item in the multi-select filter. I clear the multi-select filter. I clear the search (so now, the table should be displaying all data). What should the expanded/collapsed state be after every step of this scenario?

Thanks in advance for any suggestions!

1 Answer 1


Rather than trying to come up with all the possible combinations of user actions and the desired outcomes, perhaps try to think of what would be the most frequently used or the simplest scenario first. I say this because if you can come up with a nice and simple rule to start with, it allows you to add complexity to it incrementally and maintain the logic throughout. This is going to be a lot easier than to come up with some complex rule that works well, only to find that it is almost impossible to modify it in the future.

I think it is hard to work out what the optimal behaviour is without having a good feel for the overall structure of the data. Is it a deeply nested tree or is it broad with shallow links? Are there many leaves with similar properties or are they all unique values? Does the initial tree contain a lot of values and is it expected to increase in size by a lot more?

Without being able to take these things into consideration, I think a simple and consistent set of rules to define the behaviour will work best. Maybe instead of expanding and collapsing the table as part of the search and filter result behaviour, you should actually return the number of results somewhere, whether it is at the nodes of the tree where there are matching results or as a total (or grouped by filters). This is important because it helps the users narrow down or refine their search strategy without having to go through the tree extensively.

If you simply leave the tree nodes expanded or collapsed as the user chooses, and give them an option to expand or collapse all nodes, it should simplify the behaviour by keeping the tree navigation actions separate from the search result actions.

It's hard to know without actually seeing the interface or the underlying data, so this is my best guess at a possible starting point.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.