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"? Commented 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. Commented Jun 24, 2015 at 15:03
  • Why not use icons. Please check out the mobile UI pattern for selection..like this Commented 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

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.