Design a Responsive Data Table That Works Seamlessly Across All Devices

Design a responsive data table component for [APPLICATION_NAME] that displays [DATA_TYPE, e.g., customer records, financial transactions, inventory items] with approximately [NUMBER_OF_COLUMNS] columns and potentially [ROW_VOLUME, e.g., hundreds, thousands] of rows. The primary users are [USER_ROLE] who need to [PRIMARY_TASK, e.g., compare records, audit entries, manage inventory]. Provide a comprehensive responsive data table design specification: 1. **Column Prioritization Matrix**: List all [NUMBER_OF_COLUMNS] columns and assign each a priority level (P1 = always visible, P2 = visible on tablet+, P3 = hidden on mobile, available on demand). Justify each priority based on [USER_ROLE]'s primary task. 2. **Responsive Strategy Selection**: Evaluate and recommend the best approach for this specific use case from these patterns: - Horizontal scroll with frozen columns - Column toggling with show/hide controls - Card/list transformation on mobile - Stacked rows (label-value pairs) - Hybrid approach Provide breakpoint definitions at 1440px, 1024px, 768px, and 375px with specific layout behavior at each. 3. **Interaction Design**: - Sorting: Define visual indicators, multi-column sort behavior, and default sort order - Filtering: Recommend filter UI pattern (inline, filter bar, filter panel) for each breakpoint - Selection: Checkbox behavior, bulk actions toolbar placement, and mobile selection mode - Row actions: Inline actions vs. overflow menu threshold and mobile adaptation - Pagination vs. infinite scroll vs. virtual scrolling — recommend based on [ROW_VOLUME] 4. **Visual Specifications**: Define row height, cell padding, typography (header vs. body), alternating row colors, hover states, selected states, border treatment, and minimum column widths for each data type (text, number, date, status badge, action). 5. **Empty, Error, and Edge States**: Design the following states — no data, no search results, loading (integrate skeleton pattern), error loading data, and single-row table. 6. **Accessibility Requirements**: Specify proper semantic HTML structure, ARIA attributes for sortable columns, keyboard navigation pattern (arrow keys vs. tab), focus management, and screen reader announcements for sort changes and row selection. 7. **Performance Considerations**: Recommend virtualization threshold, lazy-loading strategy for large datasets, and how to handle [NUMBER_OF_COLUMNS]+ columns without degrading render performance.