1

Suppose my table has a column on the far left that consists of only checkboxes used for selecting rows. The default design is that the header of that column would have a checkbox, which would be used to select/deselect all of the rows (or all visible rows) at once.

I'd like to replace this behaviour with a widget that might be something like a dropdown menu with "All", "Selected", "Not selected", but I don't like this because it makes the checkbox column a lot wider. Any suggestions on what would support this filtering in a more compact way?

Improve this question
3
  • Selecting and Filtering are two separate interactions. If a user checks a box on an individual row it would be unexpected for all other unselected rows to be filtered out of the list. Can you link to an example and clarify what you mean by "filtering in a more compact way"?
    – DaveAlger
    Jun 24, 2015 at 13:48
  • @DaveAlger I was looking to do something like the example that PrimeFaces has in this example: primefaces.org/showcase/ui/data/datatable/filter.xhtml However, I'd like to have column with checkboxes in the rows and a widget to filter them without making the column too wide.
    – SimonT
    Jun 24, 2015 at 15:03
  • Why not use icons. Please check out the mobile UI pattern for selection..like this
    – bbh
    Jun 24, 2015 at 22:57

1 Answer 1

Reset to default
1

Gmail has a very nice hybrid solution for this, that adds some more powerful options:


Gmail Selector

In Gmail, the checkbox itself is clickable and behaves like a normal checkbox header, and any click on the button outside the checkbox opens the dropdown menu.

Even though the button isn't really aligned with the column, it still feels like its header. Probably because of the checkbox icon inside, relating to the convention you mentioned. It also allows for a very narrow column.

Think about something similar to this for your issue.

Improve this answer

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.