Density & View Modes
How data-dense admin interfaces adapt to different user preferences. Compact for power users, spacious for readability.
Table density switcher
Power users working with large datasets want compact views to see more rows. New users or those reviewing data prefer spacious layouts. Letting users choose their density preference is a small feature with outsized impact on daily usability.
Team members
| Name | Role | Status | Last active | |
|---|---|---|---|---|
Alice Johnson alice@acme.com | Admin | Active | 2 min ago | |
Bob Smith bob@acme.com | Editor | Active | 1 hr ago | |
Carol White carol@acme.com | Viewer | Inactive | 3 days ago | |
Dan Brown dan@acme.com | Editor | Active | 5 min ago | |
Eve Davis eve@acme.com | Admin | Active | Just now | |
Frank Miller frank@acme.com | Viewer | Invited | Never |
Add a density toggle to any data table or list view. Persist the preference per-user (localStorage or user settings). Default to 'default' density. The toggle should be subtle — a small icon group near the table header.
View mode switcher — Table / List / Grid
Different content types benefit from different layouts. A table is best for comparing data across columns. A list is best for scanning names and statuses. A grid is best for visual content like projects or files.
Projects
Table view (default for data comparison):
| Project | Status | Updated |
|---|---|---|
| Marketing Site | Active | 2 min ago |
| API Docs | Active | 1 hr ago |
| Internal Wiki | Draft | 3 days ago |
List view (for quick scanning):
Marketing Site
Updated 2 min ago
API Docs
Updated 1 hr ago
Internal Wiki
Updated 3 days ago
Grid view (for visual overview):
Marketing Site
API Docs
Internal Wiki
Offer view mode switching when your data can be meaningfully displayed in multiple formats. Persist the user's preference. Default to the view that best suits the primary use case.
Sidebar density — collapsed vs expanded
Admin tools with many navigation items need a way to collapse the sidebar to give more space to the main content. Power users who know the icons can work with a collapsed sidebar; new users need labels.
Collapsed
Expanded
Offer sidebar collapse for any admin tool with more than 8-10 navigation items. Persist the preference. Show tooltips on hover when collapsed. The collapsed state should show only icons.
Responsive stat cards — adapting to space
Dashboard stat cards need to work at different widths. In a 4-column grid they're compact; in a 2-column grid they have room for more detail. The same component should adapt gracefully.
4-column (compact):
Revenue
$45.2k
Users
2,350
Conv. Rate
3.2%
Avg. Session
4m 32s
2-column (detailed):
Revenue
$45,231
+20.1% from last month
Active Users
2,350
+180 this week
Design stat cards that work at multiple widths. Use CSS grid with responsive columns. Show more detail (sparklines, secondary metrics) when space allows. Hide secondary info at narrow widths.