Design a Responsive Data Table That Works Across All Screen Sizes

Design a responsive data table system for [APPLICATION NAME] that displays [DATA TYPE — e.g., customer records, transaction logs, inventory items] with approximately [NUMBER] columns and potentially [NUMBER] rows per page. The table must remain functional, scannable, and interactive across desktop, tablet, and mobile viewports. Provide a complete design specification: **1. Desktop Layout (1200px+)** - Define the full table structure: column order, default widths (fixed vs. fluid), minimum column widths, and text truncation rules with tooltip reveals. - Specify sorting indicators, filter controls placement, and bulk action toolbar positioning. - Include column customization: allow users to show/hide, reorder, and resize columns. Define the UI for this configurator. **2. Tablet Adaptation (768px–1199px)** - Identify which [NUMBER] columns are essential and should remain visible. - Specify the horizontal scroll behavior: sticky first column (with shadow indicator), scroll affordance cues, and touch gesture support. - Define how filters and actions collapse or relocate. **3. Mobile Layout (below 768px)** - Choose and detail one primary pattern from: card/list view transformation, accordion rows, or stacked key-value pairs. Justify your choice for [DATA TYPE]. - Design the mobile row/card showing [NUMBER] priority fields with a 'View Details' expansion. - Specify how sorting, filtering, and search adapt to mobile. **4. Interactive Features (All Breakpoints)** - Row selection: checkbox behavior, select-all logic, and selected state styling. - Inline editing: specify which columns support it, the edit trigger (click/double-click), and validation error display. - Pagination vs. infinite scroll: recommend an approach for [NUMBER] total records with rationale. - Empty state, loading state (skeleton rows), and error state designs. **5. Accessibility Checklist** - Proper semantic HTML structure (thead, tbody, scope attributes). - Keyboard navigation pattern: Tab order, arrow key support within the table, and focus management. - Screen reader announcements for sort changes, row selection, and live data updates. - Minimum touch target sizes of [SIZE]px for mobile interactive elements. **6. Performance Considerations** - Recommend virtualization strategy for tables exceeding [NUMBER] visible rows. - Specify lazy-loading behavior for off-screen columns on mobile. Deliver the design as a component specification with spacing tokens, color tokens for row states (default, hover, selected, disabled), and typography scale.