data-display-and-selectionlisted

# Data Display and Selection Complex data collections — products, files, users, orders, tasks — have no single correct view. Different tasks call for different views. Browsing benefits from grid; comparing details benefits from list or table; bulk management benefits from a dense table with mass actions. Give users the choice. --- ## View Modes Offer multiple views when the data has both visual and detailed dimensions. | View | Best for | When to default | |---|---|---| | **Grid** | Visual items: products, images, files, cards | When items are visually distinct and browsing is the primary task | | **List** | Moderate detail: tasks, emails, articles | When a key piece of text or metadata drives selection | | **Table** | Dense data: orders, reports, user management | When multiple columns of data must be compared | **View toggle placement:** top-right of the collection, adjacent to sort/filter controls. Use icon buttons with tooltips (`grid`, `list`, `table`). Persist the user's choice in localStorage. ``` [Filter ▾] [Sort ▾] [⊞ Grid] [☰ List] [⊟ Table] ``` On mobile, collapse to the view that works best for the content — grid for visual items, list for text. Do not offer a view toggle on small screens unless both views are genuinely usable. --- ## Selection: Prefer Large Hit Areas Checkboxes are small targets. Requiring users to hit a 16×16px checkbox to select a row is unnecessary friction — especially on touch devices. **Default: the entire row or car