Row count selector

A small interaction for selecting row counts on a table. Most tables have a select element that requires one click to see your options, and another to select the number of rows from the dropdown.

This element has a couple advantages:
- Indicators for the direction you can change row count (< and >)
- Expansion on hover saves desktop users a click, and defaults to the usual dropdown behavior on touch devices (tap to expand)
- Stays within the space it's been provided, rather than a select which expands vertically outside of it's parent

Thoughts?

Alex Price
Product Design at Mercury 🌱
Get in touch

More by Alex Price

View profile