Design a Responsive Data Table That Works Across All Devices
Create a fully responsive data table design system with adaptive layouts, interactive features, and WCAG accessibility.
📝 The Prompt
Design a responsive data table for [APPLICATION CONTEXT, e.g., admin dashboard, CRM, analytics platform] that displays [DATA TYPE, e.g., customer records, financial transactions, inventory items]. The table contains approximately [NUMBER] columns and typically shows [NUMBER] rows per page. Users primarily need to [KEY USER TASKS, e.g., compare values, bulk edit, export data].
Provide a complete responsive design strategy covering:
1. **Desktop Layout (1200px+)**: Design the full table with the following columns: [LIST COLUMN NAMES]. Define column widths (fixed vs. fluid), default sort order, and header styling. Include specifications for:
- Row hover and selection states
- Inline actions (edit, delete, view) vs. batch action toolbar
- Sticky header and first-column freeze behavior
- Pagination vs. infinite scroll (recommend one with rationale)
2. **Tablet Adaptation (768px–1199px)**: Define which columns to prioritize and which to hide or move into an expandable row detail. Specify the interaction pattern for accessing hidden columns (e.g., horizontal scroll with shadow indicators, column toggle dropdown, or accordion expand).
3. **Mobile Layout (below 768px)**: Choose and fully specify one of these patterns:
- **Card/List View**: Transform each row into a stacked card with key-value pairs
- **Collapsible Rows**: Show primary columns with expandable detail sections
- **Horizontal Scroll**: Maintain table structure with a fixed first column
Justify your choice based on [DATA TYPE] and user tasks.
4. **Interactive Features**: Design patterns for sorting, filtering (inline vs. filter panel), column reordering, and search. Specify how each feature adapts responsively.
5. **Data Density Controls**: Provide three density modes — compact, default, and comfortable — with specific row heights, font sizes, and padding values.
6. **Empty, Loading, and Error States**: Design each state with appropriate messaging and recovery actions.
7. **Accessibility Compliance**: Ensure WCAG 2.1 AA compliance with proper table semantics, keyboard navigation patterns (arrow keys, Tab order), and screen reader announcements for sort/filter changes.
💡 Tips for Better Results
Identify the 2-3 columns users need most and never hide those on any breakpoint — they anchor the user's mental model. Test your mobile pattern with real data lengths; names, emails, and descriptions often break layouts that look fine with placeholder text. Add subtle frozen-column shadow indicators so users know there's more content to scroll to.
🎯 Use Cases
Product designers and front-end engineers use this when building data-heavy interfaces that must remain usable and scannable on screens ranging from 4-inch phones to 27-inch monitors.