0

I'm currently struggling with the design of a table that would allow the user to select rows/items from a filtered/unfiltered table (probably with a standard checkbox column) and then still keep this selection when the search or filters of the table gets changed.

On top of that "shopping cart" management (add or remove items, or clear the selection), there will be some specific batch actions that can be applied to the selected items; like adding all of them to a group, having those entries deleted (not from the selection, but from the system) and so on.

I considered using a tab that shows a table with the selected rows:

enter image description here

But that is a no-go, since we already use tabs like this to, for example, separate entries by a specific type (something like "current tasks" from "done tasks").

Right now I'm fiddling with a bar on top of the title row that expands and replaces the "full list" table:

enter image description here

enter image description here

I'm not really happy with this, since the position of the bar will probably confuse the users on what they are seeing on the table and how it relates to that bar.

Using the bar on the bottom is also off the table (pun intended), since we use infinite scroll on tables (that can easily have hundreds of entries) and the navigation buttons (like "next-step") already sit on a fixed bar on the bottom of the page.

I think that's it. If anyone can help with examples or ideas, that will be greatly appreciated.

Edit 1: I evolved the "parallel table" idea a bit and I think I'm getting somewhere:

enter image description here

enter image description here

enter image description here

Improve this question
1
  • Re "having those entries deleted (not from the selection, but from the system)" – What's the point of keeping items in the selected if they are deleted from the system as a whole as I understand it: They are no longer available in the system, e.g. for a later selection.
    – Gerold Broser
    Mar 4 at 22:36

1 Answer 1

Reset to default
0

Maybe have a “show selected only (2)” toggle on the top. Works the same as the tab proposed.

Or, if you incorporate column sorting, sorting by selected is another option.

Improve this answer
11
  • Yeah, I think showing the number of selected items on the top is the start of the path; but I'm not really for sorting by selected, since our users will be working with tables with hundreds of entries, both selected and unselected. I will make an edit now to show where I'm at on the "parallel table" solution.
    – Arthur Boni
    Oct 15, 2020 at 9:34
  • One issue with the collapsible table is (1) the introduction of a new interaction (delete) and (2) the perceived notion duplicate rows. Checkboxes alone are simple because they are selected or unselected. The trash icon implies the user is deleting the item from the database. This might create confusion. As for duplicate rows, the rows in the collapsible table might be perceived as duplicates rather than the same. This is because there are 2 instances of the row in 2 different tables with 2 different formats.
    – Nicolas Hung
    Oct 15, 2020 at 11:00
  • I think filtering would be fine for your solution. Try to keep the table simple and consistent to avoid confusion. Test with your users to see what they think.
    – Nicolas Hung
    Oct 15, 2020 at 11:02
  • I agree about the trash can icon. Maybe something "lighter" (like a left pointing arrow) might be better. I didn't want to use the checkbox on this table, since unselecting them would make the row disappear from under the users cursor, which isn't nice. The filtering is another beast entirely for this solution. You can check the issue on my other question at ux.stackexchange.com/questions/134885/… The question here is having a "permanent" selection that stays on regardless of changes to filters.
    – Arthur Boni
    Oct 15, 2020 at 11:11
  • The collapsible table is adding needless complexity (trash can icons, arrow icons, duplicate rows, how to move rows, etc).
    – Nicolas Hung
    Oct 15, 2020 at 11:16

Your Answer

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

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