Design a Responsive Data Table for Complex Datasets

Create a responsive data table design with sorting, filtering, multiple breakpoint strategies, and accessibility specifications.

📝 The Prompt

Design a responsive data table component for a [APPLICATION_TYPE] (e.g., admin dashboard, CRM, analytics platform) that displays [DATA_TYPE] with approximately [COLUMN_COUNT] columns. The table must remain usable and scannable across all screen sizes. **Design Specification:** 1. **Desktop Table Structure (≥1024px)**: - Define column types: text, numeric (right-aligned), status badge, avatar+name, actions menu, checkbox - Header row: sortable column indicators (ascending/descending/neutral icons), column resize handles, and optional column visibility toggle - Row design: alternating row colors vs. border-separated, row hover highlight, selected row state - Specify row height, cell padding, and minimum column widths 2. **Responsive Strategy — Choose and Detail One**: - **Option A — Horizontal Scroll**: Sticky first column + sticky actions column, scroll shadow indicators, visible scrollbar styling - **Option B — Card Transformation**: Each row becomes a stacked card below [BREAKPOINT]px, with label-value pairs; define card layout, spacing, and action button placement - **Option C — Priority Column Hiding**: Define column priority tiers (P1 always visible, P2 hidden at tablet, P3 hidden at mobile), with expandable row detail for hidden data - Justify your choice for [APPLICATION_TYPE] and [DATA_TYPE] 3. **Interactive Features**: - Sorting: visual feedback and animation for column sort - Filtering: inline column filters vs. filter bar with active filter chips - Pagination vs. infinite scroll: component design for page size selector, page navigation, and total count display - Bulk selection: header checkbox behavior (select all on page vs. all results), bulk action toolbar 4. **Data States**: - Empty state with illustration and CTA - Loading state (skeleton rows with shimmer) - Error state with retry action - No results from filter/search with clear filters option 5. **Density Modes**: Define compact, default, and comfortable density presets with specific row heights (32px, 44px, 56px) and font sizes. 6. **Accessibility**: Role=table semantics, sortable column aria-sort attributes, keyboard navigation between cells, and screen reader row/column announcements. Deliver as a detailed design specification with annotated layout descriptions for each breakpoint.

💡 Tips for Better Results

Never rely solely on horizontal scrolling — always pair it with a sticky identifier column so users maintain context about which row they're reading. Test your responsive strategy with real data that includes edge cases: very long text strings, empty cells, and mixed content types in the same column. Provide density toggle options because power users scanning hundreds of rows need compact mode while occasional users prefer comfortable spacing.

🎯 Use Cases

Enterprise UX designers and frontend architects use this when designing data-heavy interfaces like admin panels, analytics dashboards, or CRM platforms where tables must serve both power users and casual viewers across devices.

🔗 Related Prompts

🎨 Design advanced

Create a Micro-Interaction Specification Document for UI Components

Specify micro-interactions for UI components with exact animation values, haptic feedback, accessibility, and implementation notes.

👁️ 3 📋 0
🎨 Design intermediate

UI/UX Design Review Checklist

Get a comprehensive UI/UX review covering hierarchy, accessibility, and responsiveness.

👁️ 2 📋 0
🎨 Design intermediate

Generate a Custom Color Palette for Any Brand or Project

Generate a complete, accessible color palette with HEX values, usage guidelines, and dark mode variants for any brand or project.

👁️ 2 📋 0
🎨 Design intermediate

Find the Perfect Typography Pairing for Your Design Project

Get expert typography pairing recommendations with type scales, spacing guidelines, and CSS fallback stacks for any design project.

👁️ 2 📋 0
🎨 Design advanced

Build Comprehensive Design System Documentation

Create complete design system documentation with tokens, component specs, accessibility standards, and contribution guidelines.

👁️ 2 📋 0
🎨 Design intermediate

Create an E-Commerce Product Page Wireframe Specification

Build a detailed e-commerce product page wireframe spec optimized for conversions with mobile adaptations.

👁️ 2 📋 0